まくろぐ

TypeScript: Visual Studio Code で TypeScript の開発環境を構築する

最終更新:

はじめに

TypeScript は Microsoft が開発している言語で、同じく Microsoft が開発している IDE である Visual Studio Code(以下 VS Code)が TypeScript コードの編集に適しています。

VS Code による TypeScript の開発環境を構築するには、下記をインストールする必要があります。

  • Visual Studio Code
  • Node.js(npm コマンド)
  • TypeScript(tsc コマンド)

各種インストール

Visual Studio Code のインストール

Visual Studio Code は下記からインストーラーをダウンロードしてインストールできます。

TypeScript のソースコード (.ts) ファイルは、単純なテキストエディタでも編集できますが、この VS Code を使って編集すると、プロパティ名の自動補完などができて効率的に開発を行えます。

Node.js のインストール

TypeScript のトランスパイラである tsc コマンドは、Node.js のパッケージとして提供されているため、先に Node.js をインストールしておく必要があります。 Node.js は下記からインストーラーをダウンロードしてインストールできます。

TypeScript (tsc) のインストール

TypeScript のトランスパイラ(tsc コマンド)は、Node Package Manager (npm) を使ってインストールすることができます。 npm コマンドは Node.js をインストールすると一緒にインストールされます。

$ npm install -g typescript

インストールする際のパッケージ名は tsc ではなく typescript なので注意してください。 tsc コマンドを実行できるようになれば OK です。

$ tsc -v
Version 3.6.3

VS Code で TypeScript コードをビルドする

VS Code で TypeScript コード (.ts) をトランスパイルして JavaScript コード (.js) に変換するには、下記のようにセットアップされている必要があります。

  • VS Code でディレクトリ(ワークスペース)を開いている
  • そのディレクトリ内に TypeScript の設定ファイル (tsconfig.json) が存在する

VS Code でディレクトリを開く

まず、プロジェクト用のディレクトリを作成して、VS Code でそのディレクトリ開きましょう(.ts ファイルを直接開くと tsc ビルドタスクを実行できません)。

$ mkdir myapp
$ code myapp

Windows エクスプローラーなどでディレクトリを右クリックして Open with Code を選択する方法でも OK です。

tsconfig.json を作成する

VS Code でディレクトリを開いたら、TypeScript の設定ファイルである tsconfig.json を作成します。 tsc コマンドを使用すると、ひな形となる設定ファイルを作成できます。 VS Code 上で Ctrl + Shift + ` と入力するとターミナルを開くことができるので、下記のように実行します。

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

デフォルトでは、例えば下記のような感じの設定ファイルが生成されます(コメント類は削除)。

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

TypeScript コードを作成してトランスパイルする

Ctrl + N で新規ファイルを作成し、下記のように実装して Ctrl + S で保存します。

sample.ts
function sayHello(name: string): void {
  console.log(`Hello ${name}!`);
}

sayHello('Maku');

sample.ts ファイルとして保存したら、次のようにしてトランスパイルを実行できます。

  1. Ctrl + Shift + B (あるいはメニューから TerminalRun Build Task…
  2. tsc: build - tsconfig.json を選択して Enter

すると、下記のように JavaScript にトランスパイルされた sample.js ファイルが生成されます。

sample.js
"use strict";
function sayHello(name) {
    console.log("Hello " + name + "!");
}
sayHello('Maku');

(応用)TypeScript コードの変更を監視する (tsc: watch)

上記では、tsc: build というビルドタスクを実行して TypeScript コードをトランスパイルしましたが、代わりに tsc: watch というビルドタスクを実行すると、TypeScript ファイル (.ts) の変更を監視する watch モードに入ります。

この watch モードに入ってから、TypeScript ファイルを編集して Ctrl + S で保存すると、その度に自動的に JavaScript ファイルへのトランスパイルが実行されます。

さらに、Node.js でサーバープログラムを開発している場合は、nodemon コマンドを使って Node サーバーを起動しておくと、JS コードが生成されるたびに自動的にサーバーを再起動してくれるので、開発効率がすごく上がります。

$ nodemon build/index.js
まくろぐ
サイトマップまくへのメッセージ