Visual Studio Code での TypeScript チュートリアル

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

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

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

TypeScript をインストールする最も簡単な方法は、Node.js Package Manager である npm を使用することです。npm がインストールされていれば、次のようにして TypeScript をお使いのコンピューターにグローバル (-g) にインストールできます。

npm install -g typescript

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

tsc --version

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

VS Code では、構文の強調表示や括弧の対応付けなどの言語機能を利用できます。エディターで入力している際に、VS Code と TypeScript 言語サーバーが提供するスマートなコード補完と提案である IntelliSense に気づいたかもしれません。以下に console のメソッドが表示されています。

メソッドを選択すると、パラメーターのヘルプが表示され、常にホバー情報を得ることができます。

tsconfig.json

このチュートリアルでは、これまで TypeScript コンパイラのデフォルトの動作に頼って TypeScript のソースコードをコンパイルしてきました。tsconfig.json ファイルを追加することで、TypeScript コンパイラのオプションを変更できます。このファイルは、コンパイラ オプションや含めるべきファイルなど、TypeScript のプロジェクト設定を定義します。

重要: このチュートリアルの残りの部分で tsconfig.json を使用するには、入力ファイルなしで tsc を呼び出してください。TypeScript コンパイラは、プロジェクト設定とコンパイラ オプションを tsconfig.json から読み取ることを知っています。

ES5 にコンパイルし、CommonJS モジュールを使用するオプションを設定する簡単な tsconfig.json を追加します。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS"
  }
}

tsconfig.json の編集中、IntelliSense (⌃Space (Windows、Linux Ctrl+Space)) があなたをサポートします。

デフォルトでは、files 属性が含まれていない場合、TypeScript は現在のフォルダーとサブフォルダー内のすべての .ts ファイルを含みます。そのため、helloworld.ts を明示的にリストする必要はありません。

ビルド出力の変更

生成された JavaScript ファイルを TypeScript ソースと同じフォルダーに置くと、大規模なプロジェクトではすぐに散らかってしまいます。そこで、outDir 属性を使用してコンパイラの出力ディレクトリを指定できます。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out"
  }
}

helloworld.js を削除し、オプションなしでコマンド tsc を実行します。helloworld.js が out ディレクトリに配置されていることがわかります。

TypeScript 言語サービスのその他の機能や、タスクを使用して VS Code から直接ビルドを実行する方法については、TypeScript のコンパイルを参照してください。

エラー チェック

TypeScript は、強力な型チェックによって一般的なプログラミングミスを避けるのに役立ちます。たとえば、message に数値を代入すると、TypeScript コンパイラは 'error TS2322: Type '2' is not assignable to type 'string'' というエラーを出します。型チェックのエラーは、VS Code のエディター (ホバー情報付きの赤い波線) と問題パネル (⇧⌘M (Windows、Linux Ctrl+Shift+M)) の両方で確認できます。[ts] というプレフィックスは、このエラーが TypeScript 言語サービスからのものであることを示しています。

クイックフィックス

TypeScript 言語サービスは、一般的なコーディングの問題を見つけるための強力な診断機能セットを持っています。たとえば、ソースコードを分析して到達不能なコードを検出し、エディター内で薄暗く表示することができます。ソースコードの行にホバーすると説明が表示され、カーソルをその行に置くと、クイック修正の電球アイコンが表示されます。

電球をクリックするか ⌘. (Windows、Linux Ctrl+.) を押すと、クイック修正メニューが表示され、そこで 到達不能なコードを削除 の修正を選択できます。

さらに、Code Action Widget: Include Nearby Quick Fixes (editor.codeActionWidget.includeNearbyQuickFixes) はデフォルトで有効になっている設定で、⌘. (Windows、Linux Ctrl+.) (コマンド ID editor.action.quickFix) から、カーソルがその行のどこにあっても、最も近いクイック修正を起動します。

このコマンドは、クイックフィックスでリファクタリングまたは修正されるソースコードをハイライト表示します。通常のコードアクションと修正以外のリファクタリングは、カーソル位置で引き続きアクティブ化できます。

デバッグ

VS Code には、TypeScript のデバッグが組み込みでサポートされています。実行中の JavaScript コードと組み合わせて TypeScript のデバッグをサポートするために、VS Code はデバッガーが元の TypeScript ソースコードと実行中の JavaScript をマッピングするためのソースマップに依存しています。tsconfig.json で "sourceMap": true を設定することで、ビルド中にソースマップを作成できます。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "out",
    "sourceMap": true
  }
}

tsc を実行して再ビルドすると、out ディレクトリの helloworld.js の隣に helloworld.js.map ができるはずです。

エディターで helloworld.ts を開いた状態で F5 を押します。他のデバッガー拡張機能がインストールされている場合は、ドロップダウンから Node.js を選択する必要があります。

デバッガーがセッションを開始し、コードを実行して、デバッグ コンソール パネルに「Hello World」メッセージを表示します。

helloworld.ts で、エディターの左側のガターをクリックしてブレークポイントを設定します。ブレークポイントが設定されると、赤い丸が表示されます。もう一度 F5 を押します。ブレークポイントに到達すると実行が停止し、実行とデバッグ ビュー (⇧⌘D (Windows、Linux Ctrl+Shift+D)) で変数値やコール スタックなどのデバッグ情報を確認できます。

VS Code の TypeScript に対する組み込みデバッグサポートや、プロジェクトのシナリオに合わせてデバッガーを構成する方法について詳しくは、TypeScript のデバッグを参照してください。

次のステップ

このチュートリアルは、VS Code を使用した TypeScript 開発の簡単な紹介でした。VS Code のコンパイルおよびデバッグサポートを TypeScript で使用する方法について、さらに詳しく学びましょう。

• TypeScript のコンパイル - VS Code の強力なタスクシステムを使用して TypeScript をコンパイルします。
• TypeScript の編集 - TypeScript に特化した編集機能です。
• TypeScript のリファクタリング - TypeScript 言語サービスから提供される便利なリファクタリングです。
• TypeScript のデバッグ - TypeScript プロジェクトのデバッガーを構成します。

よくある質問

対応する JavaScript が見つからないため、プログラムを起動できません

おそらく、tsconfig.json で "sourceMap": true を設定しておらず、VS Code の Node.js デバッガーが TypeScript のソースコードを実行中の JavaScript にマッピングできないのでしょう。ソースマップを有効にして、プロジェクトを再ビルドしてください。