LoginSignup
15
18

More than 5 years have passed since last update.

リリース直前のTypeScript 2.0をインストールして新機能を先取りする方法

Last updated at Posted at 2016-06-29

Microsoft社製の人気のAltJS「TypeScript」は現在1.8系が最新バージョンですが、2.0へのメジャーアップデートを控えています。本エントリーでは、リリース前のTypeScript 2.0を安全に試す方法を紹介します

TypeScript 2.0をインストールする

TypeScript 2.0はリリース前の為、グローバル環境にインストールすると他のプロジェクトに影響を与える可能性があります。他プロジェクトに影響を与えないよう、グローバルではなくテスト用フォルダの範囲内のみでTypeScript 2.0を使えるようにします

任意のフォルダを作成し、npm init -yを実行しておきます。

コマンド
cd myproject
npm init -y

現在開発中のTypeScript 2系をインストールするには、次のコマンドを実行します。

コマンド
npm install --save-dev typescript@beta

--save-devを指定することで、プロジェクトフォルダ内のnode_modulesフォルダにTypeScript 2.0がインストールされます。

image

TypeScript 2.0コードをコンパイルする

TypeScript 2.0の動作を確かめるため、TypeScript 2.0の新機能の一つであるprivateなconstructorを使ったコードを書きます。ファイル名はhoge.tsとします。

hoge.ts(TypeScript2のコード)
class Hoge {
    private constructor() {
    }
}

TypeScript 1.8系ではこのコードをコンパイルするとエラーになります。node_modulesにインストールされたTypeScript 2.0でコードをコンパイルするには、2つの方法があります。

1. コマンドを直接指定してコンパイルする

node_modules内のTypeScript 2.0は./node_modules/.bin/tscで実行できます。

TypeScript2のコンパイル
./node_modules/.bin/tsc hoge.ts 

実行すると、hoge.tsがJavaScriptファイルhoge.jsファイルにコンパイルされます。

hoge.js
var Hoge = (function () {
    function Hoge() {
    }
    return Hoge;
}());

2. npm-scriptsを使ってコンパイルする

package.jsonファイルにシェルスクリプト(のエイリアス)を記述することで、npmモジュールを使う方法です。直接コマンドを叩くよりも完結に記述でき、かつ他のタスクとも連携しやすいので、お薦めの方法です。npm-scriptsについては、記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA」を参照ください。

以下は、compileというタスクを作成した例です。

package.json
{
  "scripts": {
    "compile": "tsc hoge.ts"
  }
}

compileを実行するには、次のコマンドを実行します。

package.json
npm run compile

compileは、コマンド./node_modules/.bin/tsc hoge.tsと同じ意味になる為、実行すると「1. コマンドを直接指定して使う」と同じようにJavaScriptファイルhoge.jsへコンパイルされます。

hoge.js
var Hoge = (function () {
    function Hoge() {
    }
    return Hoge;
}());

TypeScript 2.0を先取りしよう

TypeScript 2.0のロードマップは記事「Roadmap · Microsoft/TypeScript Wiki」より確認できます。個人的には「async/await and generators support for ES5/ES3」が楽しみです。リリースは近々と噂されていますので、TypeScript 2.0をインストールして、一足早く新機能を試してみましょう。

次のエントリーでは、TypeScript 2.0で、npmのみで型定義ファイルを管理する方法を紹介します。

15
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
18