HTML5テクニカルノート

Visual Studio Code 1.5でTypeScript 2.0を使う

ID: FN1610003
Technique: HTML5 / JavaScript
Package: TypeScript 2.0

Visual Studio Codeは、新しい安定したバージョンのTypeScriptとともに提供されます。2016年8月に正規公開されたVisual Studio Code 1.5.3がサポートするのは、TypeScript 1.8.10です。そこで、TypeScript 2.0を使うためのやり方をかいつまんでご紹介します。

01 TypeScript 2.0のインストール

まず、TypeScrpt 2.0のインストールです。TypeScrpt 2.0にすべて切り換えるというのでなければ、インストールはプロジェクトフォルダに行うのがよいでしょう。コマンドラインツールでディレクトリをプロジェクトフォルダに変えて、npmのinstallコマンドをつぎのように打ち込めば最新版がインストールされます(TypeScriptのバージョンを2.0と指定したいときは、@2.0.0と入力します)。


npm install typescript@next

02 Visual Studio Codeの[ワークスペース設定]でtypescript.tsdkのパスを定める

つぎに、Visual Studio Codeの[基本設定]を変えます。TypeScript 2.0をインストールしたプロジェクトフォルダを開いたら、[Code](OS X)/[ファイル](Windows)→[基本設定]→[ワークスペース設定]でsettings.jsonにtypescript.tsdkのパスをつぎのように書き加えます。このパスは、プロジェクトで使うtsserver.jsが含まれているフォルダです^[*1]。絶対パスも使えますが、チームで共有するには相対パスが便利でしょう。


// 既定の設定とユーザー設定を上書きするには、このファイル内に設定を挿入します
{
	"typescript.tsdk": "node_modules/typescript/lib"
}

Visual Studio Codeを落としてから改めて起ち上げると、JavaScriptまたはTypeScriptのファイルを開いたとき、下端のステータスバーの右側ににTypeScriptのバージョンが示されます(図001)。これで、TypeScript 2.0が使えるようになりました。

図001■ステータスバーの右側に示されたTypeScriptのバージョン

[*1] npmでtsserver.jsファイルのパスを確かめるには、プロジェクトのディレクトリでつぎのようにlistコマンドを打ち込みます。なお、グローバルで調べるには、-gオプションを加えてください。


npm list typescript, tsserver.js

作成者: 野中文雄
作成日: 2016年10月10日