2018/02/17

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
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。なんちゃってSE。

    フリーウェア、Webサービス開発のためにEntyで支援を受け付けています。ご支援のほどよろしくお願いいたします。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ
    >>ブログ詳細

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから


最近の記事