編集

TypeScriptのリファクタリング

ソースコードのリファクタリングは、実行時の動作を変更せずにコードを再構築することで、プロジェクトの品質と保守性を向上させることができます。Visual Studio Codeは、エディタ内からコードベースを改善するために、メソッドの抽出や変数の抽出などのリファクタリング操作（リファクタリング）をサポートしています。

Visual Studio Codeは、TypeScript言語サービスを介したTypeScriptのリファクタリングを組み込みでサポートしており、このトピックではTypeScript言語サービスを使用したリファクタリングサポートについて説明します。

名前の変更

最も単純なリファクタリングの1つは、メソッドまたは変数の名前変更です。F2を押して、TypeScriptプロジェクト全体でカーソル下のシンボルの名前を変更します。

Renaming a method

リファクタリング

利用可能なTypeScriptのリファクタリングを見るには、ソースコードの領域にカーソルを置き、右クリックしてエディタのコンテキストメニューを表示し、Refactorを選択するか、直接⌃⇧R（Windows、Linux Ctrl+Shift+R）を押します。

TypeScript refactoring

リファクタリングの詳細と個々のリファクタリングのキーボードショートカットの設定方法については、リファクタリングを参照してください。

利用可能なTypeScriptのリファクタリングには以下が含まれます。

メソッドまたは関数への抽出 - 選択したステートメントまたは式を、ファイル内の新しいメソッドまたは新しい関数に抽出します。

メソッドへの抽出または関数への抽出のリファクタリングを選択した後、抽出されたメソッド/関数の名前を入力します。
定数への抽出 - 選択した式を、ファイル内の新しい定数に抽出します。
型をインターフェースまたは型エイリアスに抽出 - 選択した複雑な型を、インターフェースまたは型エイリアスに抽出します。
新しいファイルに移動 - ファイルのトップレベルスコープにある1つ以上のクラス、関数、定数、またはインターフェースを新しいファイルに移動します。新しいファイルの名前は、選択したシンボルの名前から推測されます。
名前付きインポートと名前空間インポートの変換 - 名前付きインポート（import { Name } from './foo'）と名前空間インポート（import * as foo from './foo'）を変換します。
デフォルトエクスポートと名前付きエクスポートの変換 - export defaultの使用から名前付きエクスポート（export const Foo = ...）への変換。
パラメーターを分割代入されたオブジェクトに変換 - 長い引数リストを取る関数を、単一の引数オブジェクトを取るように書き換えます。
getおよびsetアクセサーの生成 - 選択したクラスプロパティのゲッターとセッターを生成することで、カプセル化します。
関数の戻り値の型を推論 - 関数に明示的な戻り値の型注釈を追加します。
アロー関数からの波括弧の追加/削除 - 単一行のアロー関数を複数行に、またはその逆方向へ変換します。

クイックフィックス

クイックフィックスは、単純なコーディングエラーに対処する提案された編集です。クイックフィックスの例には以下が含まれます。

メンバーアクセスへの不足しているthisの追加。
スペルミスのあるプロパティ名の修正。
到達不能なコードや未使用のインポートの削除
宣言

TypeScriptのエラーにカーソルを移動すると、VS Codeは電球を表示し、クイックフィックスが利用可能であることを示します。電球をクリックするか、⌘.（Windows、Linux Ctrl+.）を押して、利用可能なクイックフィックスとリファクタリングのリストを表示します。

さらに、Code Action Widget: Include Nearby Quick Fixes（editor.codeActionWidget.includeNearbyQuickFixes）はデフォルトで有効になっている設定であり、行のどこにカーソルがあっても、⌘.（Windows、Linux Ctrl+.）（コマンドID editor.action.quickFix）から行内の最も近いクイックフィックスをアクティブにします。

このコマンドは、クイックフィックスでリファクタリングまたは修正されるソースコードをハイライト表示します。通常のコードアクションと修正以外のリファクタリングは、カーソル位置で引き続きアクティブ化できます。

未使用の変数と到達不能なコード

常に真であるifステートメントのelseブロックや参照されていないインポートなど、未使用のTypeScriptコードはエディタでフェードアウトされます。

Unreachable source code faded out

カーソルをそのコードに置き、クイックフィックスコマンド（⌘.（Windows、Linux Ctrl+.））をトリガーするか、電球をクリックすることで、この未使用のコードをすばやく削除できます。

未使用のコードのフェードアウトを無効にするには、"editor.showUnused"をfalseに設定します。また、TypeScriptのみで未使用のコードのフェードアウトを無効にするには、次のように設定します。

"[typescript]": {
    "editor.showUnused":  false
},
"[typescriptreact]": {
    "editor.showUnused":  false
},

インポートの整理

インポートの整理ソースコードアクションは、TypeScriptファイル内のインポートをソートし、未使用のインポートを削除します。

インポートの整理は、ソースアクションコンテキストメニューから実行することも、⇧⌥O（Windows、Linux Shift+Alt+O）キーボードショートカットを使用しても実行できます。

TypeScriptファイルを保存する際に、次のように設定することで、インポートの整理を自動的に行うこともできます。

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

ファイル移動時のインポート更新

TypeScriptプロジェクト内で他のファイルによってインポートされているファイルを移動または名前変更すると、VS Codeは移動されたファイルを参照するすべてのインポートパスを自動的に更新できます。

typescript.updateImportsOnFileMove.enabled設定がこの動作を制御します。有効な設定値は以下のとおりです。

"prompt" - デフォルト。ファイル移動ごとにパスを更新するかどうかを尋ねます。
"always" - 常にパスを自動的に更新します。
"never" - パスを自動的に更新せず、プロンプトも表示しません。

保存時のコードアクション

editor.codeActionsOnSave設定では、ファイルを保存したときに実行されるCode Actionsのセットを構成できます。たとえば、次のように設定することで、保存時にインポートの整理を有効にできます。

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

現在、以下のenumがサポートされています。

explicit (デフォルト): 明示的に保存されたときにCode Actionsをトリガーします。trueと同じです。
always: 明示的に保存されたとき、およびウィンドウまたはフォーカス変更による自動保存時にコードアクションをトリガーします。
never: 保存時にコードアクションをトリガーしません。false と同じです。

editor.codeActionsOnSaveを、順番に実行するCode Actionsの配列に設定することもできます。

以下にいくつかのソースアクションを示します。

"organizeImports" - 保存時にインポートの整理を有効にします。
"fixAll" - 保存時の自動修正は、すべての可能な修正を1回の実行で計算します（ESLintを含むすべてのプロバイダーに対して）。
"fixAll.eslint" - ESLintのみの自動修正。
"addMissingImports" - 保存時に不足しているすべてのインポートを追加します。

詳細については、TypeScriptを参照してください。

コードの提案

VS Codeは、promise上の.then呼び出しの連鎖をasyncとawaitを使用するように変換するなど、いくつかの一般的なコードの簡素化を自動的に提案します。

提案を無効にするには、"typescript.suggestionActions.enabled"をfalseに設定します。

次のステップ

さらに読む

TypeScriptの編集 - TypeScript用のVS Codeの編集機能について学びます。
TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。

08/07/2025