2019/02/02 追記
「Parcel」というツールの台頭により、本記事で紹介しているツールは更新を停止しました。Parelを使う方が手軽に最新のTypeScriptのコンパイル環境を整備できるので、筆者の次の記事を参照ください。
Microsoftの開発したTypeScriptは型を設定しつつJavaScriptを記述できる言語です。しかし、モダンなコンパイル環境を整えるには、モジュール問題の解決やソースマップの出力など、やや難易度が高いです。
今回、1行のコマンドでTypeScriptのコンパイル環境を整えられるよう、「kano-ts-starter」というスターターキットを作りました。
ダウンロード後、コマンドラインで次を実行するだけで、コンパイル環境が整います。Yarnにも対応しています。
npm i
次のコマンドで、src/ts/Main.tsというTypeScriptファイルがコンパイルされ、src/js/script.jsが出力されます。
npm run start
特徴
本スターターキットは次の機能を備えています。
- ウォッチ機能
- TypeScriptの構文チェック
- モジュールの対応（サンプルファイルでは、SubModule.tsを読み込んでいます）
- ソースマップの出力
- Promise、await/asyncの、ES 5ブラウザ向けへの出力(IE 11でも動作します)
モジュールは全てローカルで動作するので、グローバルを汚染することはありません。
ローカルサーバーについて
ローカルサーバーと連携する機能はマスターブランチでは実装していませんが、variation/with-browsersyncのブランチで使用できます。
ファイルをダウンロード後、下記コマンドを実行することで、ローカルサーバーを起動させつつ、TypeScriptのコンパイルができます。
npm run start
parcelバージョンについて
設定ファイル不要で各言語のコンパイルやバンドルができるparcel（参考記事「設定ファイル不要のParcelでTypeScriptをコンパイル・バンドルしたら拍子抜けするほど簡単だった」）を用いたバージョンです。ブランチ「variation/with-parcel」で試せます。
npm run start
なお、parcelの問題のためソースマップと自動リロードは動作しません。
主な使用技術
- typescript
- gulp (ver4)
- webpack
- Yarn
何故作ったのか？
あるエンジニアと話している際、「TypeScriptを始めてみたいが、開発環境を整えるのが難易度が高い。Webpack? Gulp? モジュール？？ 俺はTypeScriptがやりたいだけなのに、何故環境構築に時間をかけなきゃいけないんだ！？」という声を聞きました。
この声に答え、できるだけ手軽にTypeScriptを始めることができ、かつ必要な機能を揃えたスターターキットがほしいと思い、開発しました。TypeScriptをこれから始める方、使っている方も、是非試してみてください。
スターターキットのプルリクエストもお待ちしております。