TypeScript 開発環境構築方法

はじめに

TypeScript の勉強を始めたのですが、TypeScript の開発環境の構築方法は忘れやすいので構築方法を残しておきます。

エディタは Visual Studio Code になり、Web サーバーは http-server になります。

なお、Mac での開発環境構築になりますが、基本的には Windows でもあまり変わらないとは思いますので、参考になると思います。

Visual Studio Code のインストール

Visual Studio Code のサイトに行き、インストーラーをダウンロードします。ダウンロードするのは、’Stable Build’ にしましょう。

ダウンロードしたらインストーラーの指示にしたがってインストールしてください。

Node.js と npm のダウンロードとインストール

Node.js のサイトから、LST のバージョンをダウンロードしてインストーラーの指示にしたがってインストールします。この際、npm もインストールされます。

ターミナルで以下のコマンドを実行して、Node.js と npm が正しくインストールされているか確認します。

・Node.js

$ node -v
v8.9.4

 ・npm

$ npm -v
5.6.0

TypeScript のダウンロードとインストール

TypeScript は npm を使用してターミナルから以下のようにインストールします。

$ sudo npm install -g typescript

 TypeScipt のバージョンも確認しておきましょう。

$ tsc -v
Version 2.7.2

Web サーバーのインストール

ここでは、前述の通り Web サーバーとして http-server をインストールします。

$ sudo npm install -g http-server

 http-server は起動すると、カレントディレクトリをルートフォルダとする簡易 Web サーバーで起動は以下のように行います。起動するとアクセスするURLが表示されるので、そのURLにアクセスします。終了は、CTRL+Cになります。

$ http-server
Starting up http-server, serving ./public
Available on:
  http://127.0.0.1:8081
  http://192.168.11.3:8081
  http://192.168.33.1:8081
Hit CTRL-C to stop the server

なお、-o オプションを付けるとデフォルトブラウザが起動して便利なので覚えておくといいかもしれません。

$ http-server -o

ブラウザのデバッガー拡張機能のインストール

Google Chrome を使用して、Visual Studio Code で JavaScript のデバッグを行うには、Visual Studio Code の[拡張機能]アイコンをクリックして、検索ボックスに「chrome」と入力します。

そして、表示される「Debugger for Chrome」をインストールします。

おわりに

これで一通りの TypeScript の環境構築が完了しました。

それでは、よい TypeScript ライフを！