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

別のファイルまたはモジュールからの提案のいずれかを選択すると、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 はセマンティックの強調表示も提供します。

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

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

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

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

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

次のステップ

さらに読む

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

07/09/2025