VS Codeのエージェントモードを拡張するには、を試してください！

Visual Studio CodeでのTypeScript

TypeScriptは、プレーンなJavaScriptにコンパイルされる、型付きのJavaScriptスーパーセットです。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、インターフェースを提供します。

Working with TypeScript in Visual Studio Code

TypeScript コンパイラのインストール

Visual Studio CodeにはTypeScript言語サポートが含まれていますが、TypeScriptコンパイラであるtscは含まれていません。TypeScriptソースコードをJavaScriptにトランスパイルするには (tsc HelloWorld.ts)、TypeScriptコンパイラをグローバルまたはワークスペースにインストールする必要があります。

TypeScriptをインストールする最も簡単な方法は、npm、つまりNode.jsパッケージマネージャーを使用することです。npmがインストールされている場合、次のコマンドでコンピューターにTypeScriptをグローバルに (-g) インストールできます。

npm install -g typescript

バージョンを確認することで、インストールをテストできます。

tsc --version

もう1つのオプションは、TypeScriptコンパイラをプロジェクトにローカルでインストールすることです (npm install --save-dev typescript)。これにより、他のTypeScriptプロジェクトとの相互作用の可能性を回避できるという利点があります。

Hello World

簡単なHello World Node.jsの例から始めましょう。新しいフォルダーHelloWorldを作成し、VS Codeを起動します。

mkdir HelloWorld
cd HelloWorld
code .

エクスプローラーから、helloworld.tsという新しいファイルを作成します。

create new file

次に、以下のTypeScriptコードを追加します。TypeScriptのキーワードletとstring型宣言に気づくでしょう。

let message: string = 'Hello World';
console.log(message);

TypeScriptコードをコンパイルするには、統合ターミナル (⌃` (Windows、Linux Ctrl+`)) を開き、tsc helloworld.tsと入力します。これにより、新しいhelloworld.js JavaScriptファイルがコンパイルされ、作成されます。

compiled hello world

Node.jsがインストールされている場合、node helloworld.jsを実行できます。

run hello world

helloworld.jsを開くと、helloworld.tsとあまり変わらないことがわかります。型情報が削除され、letがvarになっています。

var message = 'Hello World';
console.log(message);

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 'for' snippet suggestions

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

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

エラーと警告

TypeScript言語サービスは、コーディングの問題についてプログラムを分析し、エラーと警告を報告します。

  • ステータスバーには、すべてのエラーと警告の数の概要が表示されます。
  • 概要をクリックするか、⇧⌘M (Windows、Linux Ctrl+Shift+M) を押すと、現在のすべてのエラーのリストが表示される問題パネルが表示されます。
  • エラーまたは警告のあるファイルを開くと、テキストと一緒にインラインで、および概要ルーラーに表示されます。

Error in the editor and Problems panel

現在のファイルのエラーまたは警告をループするには、F8 または ⇧F8 (Windows、Linux Shift+F8) を押すと、問題の詳細と可能なコードアクション (利用可能な場合) を示すインラインゾーンが表示されます。

Error inline in the editor

コード ナビゲーション

コードナビゲーションを使用すると、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 Marketplaceから書式設定拡張機能のいずれかをインストールしてみてください。

リファクタリング

VS Codeには、関数の抽出や定数の抽出など、TypeScript用の便利なリファクタリングが含まれています。抽出したいソースコードを選択し、ガターの電球をクリックするか、(⌘. (Windows、Linux Ctrl+.)) を押すと、利用可能なリファクタリングが表示されます。

TypeScript refactoring

リファクタリングの詳細と、個々のリファクタリングのキーボードショートカットを構成する方法については、「TypeScriptのリファクタリング」を参照してください。

名前の変更

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

Renaming a method

デバッグ

VS Codeには、ソースマップのサポートを含むTypeScript用の優れたデバッグサポートが付属しています。ブレークポイントの設定、オブジェクトの検査、コールスタックのナビゲート、デバッグコンソールでのコード実行が可能です。詳細については、「TypeScriptのデバッグ」および全体の「デバッグ」トピックを参照してください。

クライアント側のデバッグ

クライアント側のコードは、組み込みのEdgeおよびChromeデバッガー、またはDebugger for Firefoxなどのブラウザーデバッガーを使用してデバッグできます。

サーバー側のデバッグ

組み込みのデバッガーを使用して、VS CodeでNode.jsをデバッグします。セットアップは簡単で、役立つNode.jsデバッグチュートリアルがあります。

debug data inspection

リンター

リンターは、疑わしいコードに対して警告を提供します。VS Codeには組み込みのTypeScriptリンターは含まれていませんが、TypeScriptリンターの拡張機能はMarketplaceで利用できます。

ESLintは、TypeScriptもサポートする人気のリンターです。ESLint拡張機能はESLintをVS Codeに統合するため、エディターで直接リンティングエラーを確認でき、さらにクイックフィックスで多くのエラーをすばやく修正できます。ESLintプラグインガイドでは、TypeScriptプロジェクトのESLintを構成する方法が詳しく説明されています。

TypeScript 拡張機能

VS Codeは、TypeScript向けの多くの機能をすぐに利用できるように提供しています。組み込み機能に加えて、さらに多くの機能を得るために拡張機能をインストールできます。

ヒント: 上記の拡張機能タイルをクリックして説明とレビューを読み、どの拡張機能が最適か判断してください。Marketplaceで詳細をご覧ください。

次のステップ

詳細については、以下を参照してください。

よくある質問

VS 2022に付属しているTypeScriptのバージョンを使用できますか？

いいえ、Visual Studio 2019および2022に付属しているTypeScript言語サービスはVS Codeと互換性がありません。別途npmからTypeScriptのバージョンをインストールする必要があります。

VS Codeで最新のTypeScriptベータ版を使用するにはどうすればよいですか？

VS Codeで最新のTypeScript機能を試す最も簡単な方法は、JavaScript and TypeScript Nightly拡張機能をインストールすることです。

また、VS Codeを特定のTypeScriptバージョンを使用するように構成することもできます。

07/09/2025