プロジェクトのTypeScriptを一括コンパイル

TypeScript

会社の先輩エンジニアさんにTypeScriptをおすすめされたときのメモ。

TypeScriptでは事前にhoge.tsという拡張子のファイルを作っておいて、それをtscコマンド（たいぷすくりぷとこんぱいる？）を使って.jsファイルに変換していく。
コマンドとしては$ tsc hello.tsという感じ。
このコマンド実行時に--watchとかオプションをしてすると、今いるディレクトリの.tsの変更を自動検知して勝手に.jsに変換してくれたりするらしい。

しかし、tscコマンドはカレントディレクトリ以下の全ての.tsを.jsにしてくれるわけではなく、指定したファイルを指定した場所に出力してくれる事しかできないらしい。
これはちょっと使い勝手がなぁ、、、という印象で、出来る事ならプロジェクトのルートディレクトリ以下の.tsを1回のコマンドで全部.jsに変換してほしいところ。
そこで、無い物はしょうがないのでそれ用のスクリプトを作る事にした。

---

スクリプトの作成

現在のディレクトリはこんな感じ、./inputに.tsを置いておいて、tsc使って全部.jsにしたい。

いろいろ試してみたところ、下記のコマンドでカレントディクトリ以下の全ての.tsを現在位置からの相対パスで取得できた。

$ find "./" | grep -e "\.ts$" | sed -e "s/^.\/\///g"
input/dir/service.ts
input/hello.ts
input/hello2.ts

上記のコマンドを応用し、いったんスクリプトを書き上げて実行したらこんな感じになった。

むむむ。。。
全て一括で.jsに変換してくれるようになったのはよくなったのだが、同じディレクトリに.tsと.jsが混在してるのは気持ち悪い（自分だけ？）

そこで、さらに修正を加えてアウトプット用のディレクトリを指定できるようにスクリプトを修正して実行。

↓結果

できた！！

---

完成

最終的なスクリプトは以下の通り。

#!/bin/sh

input="input"
output="output"

find "./${input}" | grep -e "\.ts$" | sed -e "s/^.\/\///g" | sed -e "s/[^\/]*\.ts$//g" | uniq | while read line; do
  outDir=`echo ${line} | sed -e "s/${input}/${output}/"`
  tsc --outDir ${outDir} ${line}*.ts
done

echo "completed!"

インプットとアウトプットの場所だけ指定して、あとは.tsの相対パスを取得して$inputに当たる部分を$outputに変換してるだけ。

これを、実際に実行した際には下記のような事をスクリプトがやってくれている。

tsc --outDir ./output/dir/ ./input/dir/*.ts
tsc --outDir ./output/ ./input/*.ts

これで1回のスクリプトの実行で全.tsを良い感じのディレクトリで.jsに変換してくれるようになった！
幾分かTypeScriptのめんどくささが拭えたし、もうちょっとTypeScript触ってみよう。