TypeScript の編集

Visual Studio Code には、TypeScript の優れた編集サポートがあります。この記事では、VS Code に組み込まれている編集機能とプログラミング言語機能について詳しく説明します。キーボード ショートカット、マルチカーソル、検索、検索と置換など、VS Code の一般的な編集機能について詳しく知りたい場合は、基本編集 を参照してください。

IntelliSense

IntelliSense は、インテリジェントなコード補完、ホバー情報、シグネチャ ヘルプを表示して、より迅速かつ正確にコードを記述できるようにします。

VS Code は、個別の TypeScript ファイルと TypeScript の tsconfig.json プロジェクトに IntelliSense を提供します。

ホバー情報

TypeScript のシンボルにカーソルを合わせると、その型情報と関連ドキュメントがすばやく表示されます

⌘K ⌘I (Windows、Linux Ctrl+K Ctrl+I) のキーボード ショートカットを使用して、現在のカーソル位置にホバー情報を表示することもできます。

シグネチャヘルプ

TypeScript の関数呼び出しを記述すると、VS Code は関数のシグネチャに関する情報を表示し、現在補完しているパラメーターを強調表示します

シグネチャ ヘルプは、関数呼び出し内で ( または , を入力すると自動的に表示されます。手動でシグネチャ ヘルプをトリガーするには、⇧⌘Space (Windows、Linux Ctrl+Shift+Space) を使用します。

スニペット

VS Code には、入力時に候補として表示される基本的な TypeScript スニペット が含まれています。

拡張機能をインストールして追加のスニペットを取得したり、TypeScript 用の独自のスニペットを定義したりできます。詳細については、ユーザー定義スニペットを参照してください。

インレイヒント

インレイ ヒントは、ソース コードに追加のインライン情報を追加して、コードの動作を理解するのに役立ちます。

パラメーター名のインレイ ヒントは、関数呼び出しでパラメーターの名前を表示します

これにより、各引数の意味を一目で理解でき、ブール値のフラグを取る関数や、混同しやすいパラメーターを持つ関数に特に役立ちます。

パラメーター名のヒントを有効にするには、typescript.inlayHints.parameterNames.enabled を設定します。3 つの可能な値があります

• none — パラメーターのインレイ ヒントを無効にします。
• literals — リテラル (文字列、数値、ブール値) のインレイ ヒントのみを表示します。
• all — すべての引数に対してインレイ ヒントを表示します。

変数型のインレイ ヒント は、明示的な型アノテーションを持たない変数の型を表示します。

設定: typescript.inlayHints.variableTypes.enabled

プロパティ型のインレイ ヒント は、明示的な型アノテーションを持たないクラス プロパティの型を表示します。

設定: typescript.inlayHints.propertyDeclarationTypes.enabled

パラメーター型のヒント は、暗黙的に型付けされたパラメーターの型を表示します。

設定: typescript.inlayHints.parameterTypes.enabled

戻り値の型インレイ ヒント は、明示的な型アノテーションを持たない関数の戻り値の型を表示します。

設定: typescript.inlayHints.functionLikeReturnTypes.enabled

参照 CodeLens

TypeScript の参照 CodeLens は、クラス、インターフェイス、メソッド、プロパティ、およびエクスポートされたオブジェクトの参照のインライン カウントを表示します

ユーザー設定ファイルで "typescript.referencesCodeLens.enabled": true を設定することで、これを有効にできます。

参照カウントをクリックすると、参照のリストをすばやく参照できます

実装 CodeLens

TypeScript の実装 CodeLens は、インターフェイスの実装者の数を表示します

これを有効にするには "typescript.implementationsCodeLens.enabled": true を設定します。

参照 CodeLens と同様に、実装数をクリックすると、すべての実装のリストをすばやく参照できます。

自動インポート

自動インポートは、利用可能なシンボルを見つけて自動的にインポートを追加することで、コーディングを高速化します。

入力を開始するだけで、現在のプロジェクトで利用可能なすべての TypeScript シンボルの候補が表示されます。

別のファイルやモジュールから候補のいずれかを選択すると、VS Code は自動的にそのインポートを追加します。この例では、VS Code はファイルの先頭に Hercules のインポートを追加します

"typescript.suggest.autoImports": false を設定することで、自動インポートを無効にできます。

貼り付け時にインポートを追加

エディター間でコードをコピーして貼り付けると、コードが貼り付けられたときに VS Code が自動的にインポートを追加できます。未定義のシンボルを含むコードを貼り付けると、貼り付けコントロールが表示され、プレーン テキストとして貼り付けるか、インポートを追加するかを選択できます。

この機能は既定で有効になっていますが、typescript.updateImportsOnPaste.enabled 設定を切り替えることで無効にできます。

editor.pasteAs.preferences 設定を構成することで、貼り付けコントロールを表示せずに、インポート付きの貼り付けを既定の動作にすることができます。text.updateImports.jsts または text.updateImports を含めて、貼り付け時に常にインポートを追加します。

JSX と自動クローズタグ

VS Code の TypeScript 機能は JSX でも動作します。TypeScript で JSX を使用するには、通常の *.ts の代わりに *.tsx ファイル拡張子を使用します

VS Code には、TypeScript での JSX タグの自動クローズなど、JSX 固有の機能も含まれています

JSX タグのクローズを無効にするには、"typescript.autoClosingTags" を false に設定します。

JSDoc のサポート

VS Code の TypeScript IntelliSense は、多くの標準的な JSDoc アノテーションを理解し、それらを使用して候補、ホバー情報、およびシグネチャ ヘルプに型情報とドキュメントを表示します。

TypeScript コードに JSDoc を使用する場合、型アノテーションを含めるべきではないことに注意してください。TypeScript コンパイラは TypeScript の型アノテーションのみを使用し、JSDoc のものは無視します。

TypeScript で JSDoc コメントの候補を無効にするには、"typescript.suggest.completeJSDocs": false を設定します。

コード ナビゲーション

コード ナビゲーションを使用すると、TypeScript プロジェクトをすばやくナビゲートできます。

• 定義へ移動 F12 - シンボル定義のソース コードに移動します。
• 定義をここに表示 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - シンボルの定義を示す Peek ウィンドウを表示します。
• 参照へ移動 ⇧F12 (Windows, Linux Shift+F12) - シンボルへのすべての参照を表示します。
• 型定義へ移動 - シンボルを定義する型に移動します。クラスのインスタンスの場合、インスタンスが定義されている場所ではなく、クラス自体が表示されます。
• 実装へ移動 ⌘F12 (Windows, Linux Ctrl+F12) - インターフェイスまたは抽象メソッドの実装に移動します。

コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) のシンボルへ移動コマンドを使用して、シンボル検索でナビゲートできます。

• ファイル内のシンボルへ移動 ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• ワークスペース内のシンボルへ移動 ⌘T (Windows, Linux Ctrl+T)

フォーマット

VS Code には、妥当なデフォルト値で基本的なコード フォーマットを提供する TypeScript フォーマッターが含まれています。

組み込みフォーマッターを構成するには、typescript.format.* 設定を使用します。たとえば、波括弧を独自の行に表示するようにします。または、組み込みフォーマッターが邪魔になる場合は、"typescript.format.enable" を false に設定して無効にします。

より専門的なコード フォーマット スタイルについては、VS Code マーケットプレイスからフォーマット拡張機能のいずれかをインストールしてみてください。

構文の強調表示とセマンティック強調表示

構文の強調表示に加えて、TypeScript と JavaScript はセマンティック強調表示も提供します。

構文の強調表示は、字句規則に基づいてテキストを色付けします。セマンティック強調表示は、言語サービスから解決されたシンボル情報に基づいて構文の色付けを強化します。

セマンティック強調表示が表示されるかどうかは、現在のカラー テーマによって異なります。各テーマは、セマンティック強調表示を表示するかどうか、およびセマンティック トークンをどのようにスタイル設定するかを構成できます。

セマンティック強調表示が有効で、カラー テーマに対応するスタイル ルールが定義されている場合、異なる色とスタイルが表示されます。

セマンティック強調表示は、以下に基づいて色を変更できます

• シンボルの解決された型: 名前空間、変数、プロパティ、変数、クラス、インターフェイス、型パラメーター。
• 変数/プロパティが読み取り専用 (const) か変更可能か。
• 変数/プロパティの型が呼び出し可能 (関数型) かどうか。

次のステップ

さらに読む

• TypeScript のリファクタリング - TypeScript で利用できる便利なリファクタリングについて学びます。
• TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。