Visual Studio Code で Hello TypeScript!

TypeScript の インストールと設定ができました! さっそく Visual Studio Code から TypeScript で Hello World を!
Visual Studio Code の 公式ドキュメント が 詳しいので、ドキュメントに則って進めたいと思います.

作業環境

  • Windows 10 64bit
  • Node.js 8.4.0 64bit
  • TypeScript 2.4
  • Visual Studio Code

Visual Studio Code に TypeScript サポート の 拡張機能を追加

Visual Studio Code は 標準で TypeScript に 手厚いサポート “VS Code provides many features for TypeScript out of the box. - TypeScript Programming with Visual Studio Code“ がついています. ただし Lint については 拡張機能が必要なようで、今回は egamma さん の 拡張機能 を 使わせていただくことにしました.
レーティングが高く、インストール数も多く、また「ようこそ」画面で推薦されていることなどからの選定となります. Thank you for the great extension!, egamma-san!!

Visual Studio Code を 起動し「ようこそ」画面から、[カスタマイズする] - [ツールと言語] - [TypeScript] を クリックします.
※ 「ようこそ」 が 表示されない場合は、メニュー の [ヘルプ] - [ようこそ] を 選択します

「TypeScript に追加サポートをインストールしたあと、ウィンドウが再読み込みされます.」 が 表示されるので [OK] を クリックします.

Visual Studio Code が 再起動し、「ようこそ」の TypeScript の 色が変わり TypeScript サポートがインストールされました.

また、Ctrl + Shift + X で 拡張機能を表示するとインストール済みに TypeScript が 追加されていることからも確認できます.

プロジェクト・フォルダー の 作成 と 展開

例によって Ctrl + @ で 統合コンソールを表示. 下記コマンドを実行しフォルダーの作成 と Visual Studio Code で フォルダーを開きます. 今回は C:\Develop\workspace\hello-typescript に フォルダーを作成しました.

1
2
PS C:\Users\username> mkdir C:\Develop\workspace\hello-typescript
PS C:\Users\username> code C:\Develop\workspace\hello-typescript\

tsconfig.json と tslint.json の 作成

まず最初に tsconfig.json を 作成し、TypeScript プロジェクトの設定を行います.
Ctrl + Shift + P で コマンドパレットを表示、 new filetsconfig.json を 作成し、以下の内容で保存します.

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}

Ctrl + Shift + Ptslint 絞り込み、[TSLint: Create a “tslint.json” file] を 選択します.

tslint.json ファイルが追加されます. このファイルがないと TSLint の 拡張機能が動作しないので要注意です. 今回は TSLint の 設定をデフォルトのままとしました.

TypeScript コーディング

Ctrl + Shift + P - new file - hello.ts を 以下の内容で作成します.

1
2
3
4
5
6
7
8
class Startup {
public static main(): number {
console.log('Hello TypeScript!');
return 0;
}
}

Startup.main();

ビルド & 実行

Ctrl + Shift + B で ビルドを実行します. ビルド・タスクを聞かれるので tsc: ビルド - tsconfig.json を 選択します.

tsc によって トランスパイルされ、 hello.jshello.js.map が 生成されます.

Ctrl + Shift + @ で 新しい統合ターミナルを開き、 node を 実行します.

1
2
PS C:\Develop\workspace\hello-typescript> node .\hello.js
Hello TypeScript!



Visual Studio Code で TypeScript の Hello World が できました!