Visual Studio Code での TypeScript
TypeScript は、JavaScript の型付きスーパーセットで、プレーンな JavaScript にコンパイルされます。堅牢なコンポーネントを構築するのに役立つクラス、モジュール、インターフェイスを提供します。
TypeScript コンパイラのインストール
Visual Studio Code には TypeScript 言語サポートが含まれていますが、TypeScript コンパイラ tsc は含まれていません。TypeScript ソースコードを JavaScript にトランスパイルするには (tsc HelloWorld.ts)、TypeScript コンパイラをグローバルまたはワークスペースにインストールする必要があります。
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 - シンボル定義のソース コードに移動します。
- 定義を Peek ⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10) - シンボルの定義を表示する Peek ウィンドウを表示します。
- 参照に移動 ⇧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 のリファクタリング」を参照してください。
名前の変更
最も簡単なリファクタリングの 1 つは、メソッドまたは変数の名前変更です。F2 を押すと、TypeScript プロジェクト全体でカーソル下のシンボルの名前が変更されます
デバッグ
VS Code は、ソースマップのサポートを含む優れた TypeScript デバッグサポートを提供します。ブレークポイントを設定し、オブジェクトを検査し、コールスタックをナビゲートし、デバッグコンソールでコードを実行します。詳細については、「TypeScript のデバッグ」および全体のデバッグに関するトピックを参照してください。
クライアント側をデバッグする
組み込みの Edge および Chrome デバッガー、または Firefox 用デバッガーなどのブラウザーデバッガーを使用して、クライアント側のコードをデバッグできます。
サーバー側をデバッグする
組み込みのデバッガーを使用して VS Code で Node.js をデバッグします。セットアップは簡単で、Node.js デバッグチュートリアルが役立ちます。
リンター
リンターは、不審なコードに対して警告を表示します。VS Code には組み込みの TypeScript リンターは含まれていませんが、TypeScript リンターの拡張機能が Marketplace で利用できます。
ESLint は人気のあるリンターで、TypeScript もサポートしています。ESLint 拡張機能は ESLint を VS Code に統合するため、エディターでリンティングエラーを直接確認でき、クイックフィックスでそれらの多くをすばやく修正することもできます。ESLint プラグインガイドでは、TypeScript プロジェクト用に ESLint を構成する方法が詳述されています。
TypeScript 拡張機能
VS Code は、多くの機能をすぐに使える形で TypeScript 向けに提供しています。組み込み機能に加えて、より多くの機能を得るために拡張機能をインストールできます。
ヒント: 上の拡張機能タイルをクリックして、説明とレビューを読み、自分に最適な拡張機能を選択してください。詳細はマーケットプレイスを参照してください。
次のステップ
詳細については、以下を参照してください。
- 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 バージョンをインストールする必要があります。
VS Code で最新の TypeScript ベータ版を使用するにはどうすればよいですか？
VS Code で最新の TypeScript 機能を試す最も簡単な方法は、JavaScript and TypeScript Nightly 拡張機能をインストールすることです。
また、VS Code を特定の TypeScript バージョンを使用するように構成することもできます。