開発環境

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 file で tsconfig.json を 作成し、以下の内容で保存します.

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

Ctrl + Shift + P で tslint 絞り込み、[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.js と hello.js.map が 生成されます.

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

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

TypeScript実践マスター
posted with ヨメレバ
古賀慎一 日経BP社 2017-12-12
Amazonで調べる
楽天ブックスで調べる
7netで調べる
速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ！ 速習シリーズ[Kindle版]
posted with ヨメレバ
山田祥寛 WINGSプロジェクト 2017-06-21
Kindleで調べる

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