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用に独自のスニペットを定義したりできます。詳細については、「ユーザー定義スニペット」を参照してください。

インレイ ヒント

Inlay Hints は、コードを理解しやすくするために、ソース コードにインラインで追加情報を提供します。

パラメーター名 Inlay Hints は、関数呼び出しでパラメーター名を表示します。

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

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

• `none` — パラメーター Inlay Hints を無効にします。
• `literals` — リテラル（文字列、数値、ブール値）に対してのみ Inlay Hints を表示します。
• `all` — すべての引数に対して Inlay Hints を表示します。

**変数型インレイヒント** は、明示的な型注釈がない変数の型を表示します。

設定: js/ts.inlayHints.variableTypes.enabled

**プロパティ型インレイヒント** は、明示的な型注釈がないクラスプロパティの型を表示します。

設定: js/ts.inlayHints.propertyDeclarationTypes.enabled

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

設定: js/ts.inlayHints.parameterTypes.enabled

**戻り値の型インレイヒント** は、明示的な型注釈がない関数の戻り値の型を表示します。

設定: js/ts.inlayHints.functionLikeReturnTypes.enabled

参照 CodeLens

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

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

参照数をクリックすると、参照リストをすばやく参照できます。

実装CodeLens

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

"js/ts.implementationsCodeLens.enabled": trueを設定することで、これを有効にできます。

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

自動インポート

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

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

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

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

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

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

この機能はデフォルトで有効になっていますが、setting(js/ts.updateImportsOnPaste.enabled) 設定を切り替えることで無効にできます。

ペーストコントロールを表示せずにインポート付きのペーストをデフォルトの動作にするには、 ... 設定を構成します。text.updateImports.jsts または text.updateImports を含めると、ペースト時に常にインポートが追加されます。

JSX と自動終了タグ

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

VS Codeには、TypeScriptでのJSXタグの自動閉じなどのJSX固有の機能も含まれています。

JSXタグの閉じを無効にするには、"js/ts.autoClosingTags.enabled"をfalseに設定します。

JSDoc のサポート

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

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

TypeScriptでJSDocコメントの提案を無効にするには、"js/ts.suggest.completeJSDocs": falseを設定します。

コード ナビゲーション

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

• **定義に移動** F12 - シンボルの定義のソースコードに移動します。
• **定義をピーク** ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - シンボルの定義を示すピークウィンドウを表示します。
• **参照に移動** ⇧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フォーマッターが含まれています。

波括弧を独自の行に表示させるなど、組み込みのフォーマッターを設定するには、js/ts.format.*「設定」を使用します。または、組み込みのフォーマッターが邪魔になる場合は、"js/ts.format.enable"をfalseに設定して無効にします。

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

構文ハイライトとセマンティックハイライト

構文ハイライトに加えて、TypeScriptとJavaScriptはセマンティックハイライトも提供します。

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

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

セマンティックハイライトが有効で、カラーテーマに対応するスタイルルールが定義されている場合、異なる色やスタイルを見ることができます。

セマンティックハイライトは、以下に基づいて色を変更できます。

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

次のステップ

詳細については、以下をお読みください。

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