TypeScript + VSCode

TypeScript + VSCode

過去のCoffeeScriptのファイルをTypeScriptに移行。 そのときに感じたTypeScriptのメリット、デメリット。

メリット

インテリセンスで大体のミスは防げる。

これが一番デカい。これがすべてと言ってもよい。 自分で定義したクラス、ネームスペース、変数、関数、 enumその他すべてにインテリセンスがついてくれるので、 まず入力ミスは防げるし、コンパイルでバグは表示されるので、 そもそもバグでない。

型を定義しなくてもよい。

毎回型を作るのがめんどくさいときは、とりあえずanyを 入れておけばよい。最初にそこまで作り込む気がしない ときは、anyを入れておいて、後々管理する必要がある場合 に型定義していけばよい。

メタプログラミングで生成したtsファイルもコンパイル

bashなどのスクリプトと組み合わせることで、フォルダ内のファイルを データ化し、使用しているファイル削除された場合、データ化した部分でも エラーがでるので、自動化との組み合わせの相性は良いと思う。あとtsファイル を監視(Ctrl + Shift + B: tsc watch)しておけば、ファイルの変更に応じて 勝手にコンパイルしてくれるので楽。

例) imagesフォルダ内のファイルをgame.ASSETS = {};に追加する。

ts_file="./source/auto-generated.ts"

cat << EOT > $ts_file
namespace game {
  export let ASSETS = {
EOT

# images
for file in `\find ./images -type f`; do
  file_name="${file##*/}"
  key="${file_name%.*}"
  echo "    \"${key}\" : \"${file}\"," >> $ts_file
done

cat << EOT >> $ts_file
  };
}
EOT

デメリット

環境構築の必要がある。

そこまで難しくはない。

  • nodejs(nodist)のインストール
  • npm install -g typescript

  • tsconfig.json作成 tconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}

main.ts

let v: number = 100;
print(`${v}`);

jsのライブラリの定義ファイル作成がめんどくさい可能性あり。

使いたいライブラリの*.d.tsファイルがない場合にどうすればいいか わからなくなる。超手抜きで作れば、インテリセンスの恩恵はほとんど 受けられないがTypeScriptのコンパイラに怒られなくて済む。

例) 適当に自作したBox2d.d.ts

interface Box2D {
  Common: any;
  Dynamics: any;
  Collision: any;
}

declare var Box2D: Box2D;

感想

CoffeeScriptより読みやすい。ちゃんと型を定義してあると、その構造の 意図が読み取りやすい。型定義がめんどくさくなったらとりあえずanyぶっこめ ばいいので、初心者でも気が楽。

Xcodeを使っていて、Swiftのインテリセンスが遅くてイライラしていたが、 VSCodeは超早いのでぜひ使ってみたほうが良い。