前職でAngular^2.0.0をTypeScriptで書いていましたが、現職ではReactをESNextで書いています。
Angularはsemverを採用していることもあり、個人でアップデートを追っているのですが、今回は現職がESNextを使用していることもあって、AngularをESNextで書く方法や、少し気をつけた方が良い点を挙げていきます。(基本的には本家ドキュメントのts-to-jsを読めばやり方はわかります)
参考にしたリポジトリ
前提
webpackとbabelを使用します。templateとstylesはファイルを分けます。
babelの注意点
babel-preset-latest
を使えば、基本的にdecorator以外はTypeScriptと同じ書き味で書けます(decoratorはlatest
には入っていません)。
さて、このdecoratorが厄介者です。ecmafutureにおいてdecoratorの存在はまだ流動的で、仕様も定まっておらず、つまり確定的なtranspile方法がない現状ですので、もし使用したいのなら、相応の覚悟を持って使用する必要があります。
使いたい方は、babel-plugin-transform-decorators-legacy
を使うか、babel-preset-angular2
を使うと楽です。とくにbabel-preset-angular2
はtransform-decorators-legacyをさらに拡張してあり、よりTypeScriptに近い書き味で書けますが、お仕事で使うのならコードリーディングはしておいた方が良いかもしれません。
stylesの注意点
to-string-loader
を使うとわりと何も考えずに実装できます。逆にraw-loader
だと動かないです(わたしは諦めました)。
templateとstylesの指定を楽にする
webpackとbabelを使っているので、基本的にはESmodulesの形式でimportしたものを指定しますが、angular2-template-loader
を使うと、templateUrlとstyleUrlsの形で指定できます。
ESNextで書く利点
webpackな時点でお察しではありますが、TypeScriptで書くよりはコンパイルが早いです。
ぶっちゃけこれが唯一の利点ですが、lacoさんがlight-ts-loaderを作ってしまったので、もはやただの興味本位でしか無くなってしまった気配があります...。
余談
AngularでFluxをデザインパターンのみ適用できるかなというものを考えるために作っているリポジトリで試してみました(肝心のFlux云々がまだ影も形もありません)。
https://github.com/asukaleido/angular-flux-example
現在のTypeScriptはやろうと思えば型ガン無視で書けるので、頑張った割には使えない内容になってしまった感が否めませんが、逆に言えばほぼTypeScriptの書き味で書けるくらいESNextとTypeScriptは近いものになっているのだなーとしみじみ感じた次第です。