Visual Studio Codeを使ったTypeScriptの開発環境の準備

samatsu 9/25/2017 2553 N/A TypeScript

ES2015の内容を勉強してから、TypeScriptというのを最近触りだしたのですが、もっと早くから使っていればよかったと思った次第です。

Visual Studio Codeを使ってTypeScriptのお勉強をしたので、環境のセットアップ方法のメモ。

1.npmの準備

https://nodejs.org/ja/ から安定バージョンの nodejs をダウンロードします。記事作成時点で v6.11.3 でした。

ダウンロードしたインストーラーをデフォルトのままインストールすればOKです。

コマンドプロンプトを起動して、typescriptのコンパイラーをインストールします。

npm install -g typescript

次のコマンドを実行してインストールに成功しているかを確認します。記事作成時点ではバージョンは 2.5.2 でした。

tsc -version

2. Visual Studio Code のインストール

Visual Studio Codeもインストールするだけです。https://code.visualstudio.com/ にアクセスして、インストーラーをダウンロードしてインストールします。デフォルトのままでOKですが、必要に応じてオプションを選択してインストールしてください。

3.ビルド環境の構築

あとは、https://code.visualstudio.com/docs/languages/typescript を参考にしてプロジェクトのひな型の環境を参考にしつつセットアップしました。

Visual Studio Code を起動します。メニューのファイル > フォルダーを開くをクリックして、空のフォルダーを選択して開来ます。例えば、下図ではTSフォルダーを開いています。

左側に表示されるエクスプローラーから、ファイルの新規作成アイコンをクリックして tsconfig.jsonという名前でファイルを作成します。

例えば、次のようにtsconfig.jsonを編集します。

{
  "compilerOptions": {
    "outFile": "HelloWorld.js",
    "target": "es3",
    "sourceMap": true 
  }
}

次に、サンプルのTypsScriptファイルを作成しjます。今回は、Hello.ts という名前でファイルを作成して下図のようにコードを入力しました。

class HelloTypeScript {
  name:string;
  constructor(name:string){ 
    this.name = name;
  }
  showHello(){  
    return `${this.name}さん、こんにちは！`
  }
}
let hello = new HelloTypeScript("太郎")
document.querySelector("body").innerHTML = hello.showHello();