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) - シンボル定義のソースコードに移動します。
- 定義をピーク (⌥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 マーケットプレイスからフォーマット拡張機能のいずれかをインストールしてみてください。
リファクタリング
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 リンターは含まれていませんが、マーケットプレイスで TypeScript リンター 拡張機能を利用できます。
ESLint は、TypeScript もサポートする一般的なリンターです。ESLint 拡張機能は ESLint を VS Code に統合するため、エディターで直接 lint エラーを確認でき、クイックフィックスを使用してそれらの多くをすばやく修正することもできます。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 拡張機能をインストールすることです。