Visual Studio Code での TypeScript
TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型付きスーパーセットです。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、インターフェイスを提供します。
TypeScript コンパイラのインストール
Visual Studio Code には TypeScript 言語サポートが含まれていますが、TypeScript コンパイラ (tsc) は含まれていません。TypeScript ソースコードを JavaScript にトランスパイルするには、TypeScript コンパイラをグローバルまたはワークスペースにインストールする必要があります (tsc HelloWorld.ts)。
TypeScript をインストールする最も簡単な方法は、Node.js パッケージマネージャーである npm を介することです。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 という名前の新しいファイルを作成します。
次に、以下の TypeScript コードを追加します。TypeScript のキーワード let と string 型の宣言があることに気付くでしょう。
let message: string = 'Hello World';
console.log(message);
TypeScript コードをコンパイルするには、統合ターミナル (⌃` (Windows、Linux Ctrl+`)) を開き、tsc helloworld.ts と入力します。これにより、コンパイルされて新しい helloworld.js JavaScript ファイルが作成されます。
Node.js がインストールされている場合は、node helloworld.js を実行できます。
helloworld.js を開くと、helloworld.ts とあまり変わらないことがわかります。型情報は削除され、let は var になっています。
var message = 'Hello World';
console.log(message);
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 用に独自のスニペットを定義したりできます。詳細については、ユーザー定義スニペットを参照してください。
ヒント: 設定ファイルで editor.snippetSuggestions を
"none"に設定することで、スニペットを無効にできます。スニペットを表示したい場合は、提案に対する相対的な順序を指定できます。上部 ("top")、下部 ("bottom")、またはアルファベット順にインライン化 ("inline")。デフォルトは"inline"です。
エラーと警告
TypeScript 言語サービスは、プログラムを分析してコーディングの問題を検出し、エラーと警告を報告します
- ステータス バーには、すべてのエラーと警告の数の概要が表示されます。
- 概要をクリックするか、⇧⌘M (Windows、Linux Ctrl+Shift+M) を押すと、現在発生しているすべてのエラーの一覧が表示される「問題」パネルが表示されます。
- エラーや警告のあるファイルを開くと、それらはテキスト内にインラインで、およびオーバービュー ルーラーに表示されます。
現在のファイル内のエラーまたは警告を順に移動するには、F8 または ⇧F8 (Windows、Linux Shift+F8) を押します。問題の詳細と、利用可能な場合は実行可能なコード アクションを示すインライン ゾーンが表示されます。
コード ナビゲーション
コード ナビゲーションを使用すると、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 Marketplace からフォーマット用の拡張機能のいずれかをインストールしてみてください。
リファクタリング
VS Code には、「関数の抽出」や「定数の抽出」など、TypeScript 用の便利なリファクタリング機能が含まれています。抽出したいソースコードを選択し、エディターの左端にある電球アイコンをクリックするか、(⌘. (Windows、Linux Ctrl+.)) を押すことで、利用可能なリファクタリングが表示されます。
リファクタリングの詳細、および個々のリファクタリングのキーボード ショートカットを構成する方法については、TypeScript のリファクタリングを参照してください。
名前の変更
最も単純なリファクタリングの 1 つは、メソッドや変数の名前を変更することです。F2 を押すと、TypeScript プロジェクト全体でカーソル下にあるシンボルの名前を変更できます
デバッグ
VS Code には、ソースマップのサポートを含む、TypeScript の優れたデバッグ サポートが用意されています。ブレークポイントの設定、オブジェクトの検査、コールスタックの移動、デバッグ コンソールでのコードの実行などを行えます。詳細については、TypeScript のデバッグおよび総合的なデバッグに関するトピックを参照してください。
クライアントサイドのデバッグ
組み込みの Edge および Chrome デバッガー、または Debugger for Firefox などのブラウザー デバッガーを使用して、クライアント側のコードをデバッグできます。
サーバーサイドのデバッグ
VS Code で組み込みデバッガーを使用して Node.js をデバッグします。セットアップは簡単で、Node.js デバッグのチュートリアルが役立ちます。
リンター
リンターは、不審なコードに対して警告を表示します。VS Code には組み込みの TypeScript リンターは含まれていませんが、Marketplace で TypeScript リンターの拡張機能を入手できます。
ESLint は人気のあるリンターで、TypeScript もサポートしています。ESLint 拡張機能は ESLint を VS Code に統合するため、エディター内で直接リンティング エラーを確認でき、さらにその多くをクイック フィックスで素早く修正できます。ESLint プラグイン ガイドでは、TypeScript プロジェクト向けに ESLint を設定する方法について詳しく説明しています。
TypeScript 拡張機能
VS Code は、追加設定なしで多くの TypeScript 用機能を提供します。組み込みの機能に加えて、さらに高度な機能を利用するために拡張機能をインストールすることもできます。
ヒント: 上記の拡張機能のタイルをクリックして説明やレビューを読み、ご自身に最適な拡張機能を決定してください。詳細は Marketplace をご覧ください。
次のステップ
詳細については、以下を参照してください。
- TypeScript チュートリアル - VS Code でシンプルな Hello World TypeScript を作成します。
- TypeScript の編集 - TypeScript の特定の編集機能。
- TypeScript のリファクタリング - TypeScript 言語サービスからの便利なリファクタリング。
- TypeScript のトランスパイル - TypeScript をターゲットとなるバージョンの JavaScript にコンパイルします。
- TypeScript のデバッグ - VS Code を使用して、サーバー側とクライアント側の両方で TypeScript をデバッグする方法について説明します。
よくある質問
VS 2022 に付属しているバージョンの TypeScript を使用できますか？
いいえ、Visual Studio 2019 および 2022 に付属している TypeScript 言語サービスは VS Code と互換性がありません。npm から別のバージョンの TypeScript をインストールする必要があります。
最新の TypeScript ベータ版を VS Code で使用するにはどうすればよいですか？
VS Code で最新の TypeScript 機能を試す最も簡単な方法は、JavaScript and TypeScript Nightly 拡張機能をインストールすることです。