TypeScript のリファクタリング

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

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

名前の変更

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

Renaming a method

リファクタリング

利用可能な TypeScript リファクタリングを確認するには、ソースコードの領域にカーソルを置き、右クリックしてエディターのコンテキストメニューを表示し、[リファクタリング] を選択するか、⌃⇧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+.) を押して、利用可能なクイックフィックスとリファクタリングのリストを表示します。

さらに、[コードアクションウィジェット: 付近のクイックフィックスを含める] (editor.codeActionWidget.includeNearbyQuickFixes) は、デフォルトで有効になっている設定であり、⌘. (Windows、Linux Ctrl+.) (コマンド ID editor.action.quickFix) から行内の最も近いクイックフィックスを、カーソルがその行のどこにあってもアクティブにします。

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

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

常に true である 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 設定を使用すると、ファイルの保存時に実行されるコードアクションのセットを構成できます。たとえば、保存時にインポートの整理を有効にするには、次のように設定します。

// 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",
}

今日現在、次の列挙型がサポートされています

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

editor.codeActionsOnSave を実行するコードアクションの配列に設定することもできます。

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

"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 プロジェクトのデバッガーを構成します。

04/03/2025