TypeScript + ES6 が使いたい!
JavaScript には ES6 (ES2015) になって多彩な便利機能が追加され、babelなどのトランスパイラを使えば今すぐES6を使った快適生活が実現できる。
また、TypeScriptも、JavaScriptをベースにしながらも静的型付きプログラミングを実現しており、実行時の下らない型エラーなどから解放されてこちらも非常に快適だ。
TypeScript の最新版 (もうすぐリリースされるといいなあ) 1.5では、[ES6の機能のサポートが多く追加されており] (https://github.com/Microsoft/TypeScript/wiki/Roadmap#15) 、TypeScript と ES6 の快適さを両方享受することができる。
しかし、1.5 はまだ正式リリースされておらず、実際ES6と組み合わせて使おうとすると問題がいくつか起こるようだ。そこで、現時点で TypeScript 1.5 + ES6 を合わせて使ううまい方法を試してまとめてみた。
インストール
TypeScript 1.5 はまだ正式リリースされていなので、とりあえずGitHubから最新版を入れる。
npm install --save-dev git://github.com/Microsoft/TypeScript
tsconfig.json
target を es6 に設定する。
es5 でもある程度 ES6 の機能を ES5 としてコンパイルしてくれるようだが、
-
Map/Setなどの型定義がない - CommonJS/ES6 module の interop がうまくいかない
などの問題があるようなので、TypeScript側ではES6を出力して、ES6 -> ES5 の変換は Babel などに任せたほうがよさそう。
{
"version": "1.5.0-beta",
"compilerOptions": {
"target": "es6",
...
},
...
}
DefinitelyTyped の型定義が動かない
現在の TypeScript 1.5 + ES6 output の組み合わせだと、export =やimport hoge = require("hoge"); のような、旧来のCommonJSモジュールを扱う方法でエラーが出る。代わりに、ES6 module を使用しなければならない。
しかし、TypeScriptの型定義がが集まっていて重宝されているDefinitelyTyped の型定義では、当然旧来のCommonJS方式が使われているため、 DefinitelyTyped からインストールしてきた型定義ファイルがことごとくエラーになる。(問題は報告されているようだ)
例: node.d.ts を読み込んだ場合
こんな感じのエラーが延々と出る。
typings/node/node.d.ts(395,5): error TS1202: Import assignment cannot be used when targeting ECMAScript 6 or higher. Consider using 'import * as ns from "mod"', 'import {a} from "mod"' or 'import d from "mod"' instead.
解決策
とりあえず、DefinitelyTypedからインストールしてきたd.tsのCommonJSスタイルの部分を、ES6 moduleスタイルに手動で修正するのが一番ましな解だと思う。
- import foo = require("foo");
+ import foo from "foo"
- export = foo;
+ export default foo;
現時点ではこんな感じで延々と解決していくしかなさそう…?
まとめ
TypeScript 1.5 + ES6 は非常に快適だが、現時点ではいくつか問題があるようなので、上のような方法で解決していくのが良さそうだと思った。
(他のより良い方法があったら教えていただけるとすごくありがたいです。あと他の人がどのようにやっているのか知りたい)
ここで挙げたような方法を実際に使って TypeScript 1.5 で開発してみた repository はこれ: