TypeScript の編集

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

IntelliSense

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

TypeScript small completions for String type

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

ホバー情報

TypeScript シンボルにカーソルを合わせると、型情報と関連ドキュメントをすばやく確認できます

Hover for a lodash function

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

シグネチャヘルプ

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

Signature help for the lodash capitalize function

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

スニペット

VS Code には、入力時に提案される基本的な TypeScript スニペットが含まれています。

Typescript snippets

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

ヒント

設定ファイルで editor.snippetSuggestions を "none" に設定すると、スニペットを無効にできます。スニペットを表示する場合は、候補に対する相対的な順序を指定できます。上部 ("top")、下部 ("bottom")、またはアルファベット順にインライン ("inline") です。デフォルトは "inline" です。

インレイヒント

インレイヒントは、コードが何をしているかを理解するのに役立つ追加のインライン情報をソースコードに追加します。

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

Parameter name inlay hints

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

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

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

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

設定: typescript.inlayHints.variableTypes.enabled

Variable type inlay hints

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

設定: typescript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

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

設定: typescript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

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

設定: typescript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

参照 CodeLens

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

TypeScript references CodeLens

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

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

TypeScript references CodeLens peek

実装 CodeLens

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

TypeScript implementations CodeLens

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

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

自動インポート

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

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

Global symbols are shown in the suggestion list

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

After selecting a symbol from a different file, an import is added for it automatically

"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 ファイル拡張子を使用します

IntelliSense in JSX

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

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

JSDoc サポート

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

TypeScript language within VS Code

TypeScript コードに JSDoc を使用する場合、型注釈を含めないようにしてください。TypeScript コンパイラは TypeScript 型注釈のみを使用し、JSDoc からの注釈は無視します。

TypeScript で JSDoc コメント候補を無効にするには、"typescript.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 フォーマッターが含まれています。

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

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

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

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

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

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

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

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

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

次のステップ

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

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

04/03/2025