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 ライフを!
スポンサーリンク
Twitter ではブログにはない、いろんな情報を発信しています。
@fnyaさんをフォロー
コメント