既存のJavaScript (Node.js)をTypeScriptにする

TL;DR;

• 迷ったら最初からTypeScript入れておくが吉
• 移行するならimplicit*系のオプションはOffにして優しいTypescriptに
• tsc + nodemonで効率のいい開発

この記事の対象

• 今あるJavaScriptで書かれたプロジェクトにTypeScriptを導入したい人
• JavaScriptに少しずつTypeScriptを入れたい人
• Node.jsで動かすことを想定しています。（フロントエンドではない）

1. まずTypeScriptを導入する

これは簡単。yarn add --dev typescriptだけ。

2. tsconfigを書く

これが面倒。include, excludeは各自頑張ってください。どこかのを参考にすればどうにかなります。（node_modulesとかをexcludeに入れるのを忘れずに。とっても重くなります）
compilerOptionsで悩んだので、必要そうなところを載せます

• targetはここ見て自分のNodeがどこまで対応しているかで決めるがいいと思います。Node 13を使っているのならes2019まで対応しているのでes2019でいいかと思います。

• libは「es2018にはないけれど、これもあることにしてね」とtypescriptに伝える設定です。polyfillされるわけではないことに注意してください

• implicit*は、導入前に死なないようにとりあえずfalseにしておくことをおすすめします

• implicitAnyは個人的にずっとfalseでいいように思います。必要なところだけ形を書いて安全にしていけるところがJavaScriptをTypeScriptのいいとこどりができると思いますし、一番効率的かと思います。

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es2019",
    "module": "commonjs",

    // ReactのSSRをしている場合はこの辺の設定が必要
    "jsx": "react",
    "lib": [
      "dom",
      "es2019.array" // targetがes2017だけどArray.flatとか使いたいよーと言う場合に追加してください。他にもいろいろあります。
    ],

    // 段階的に移行するならtrueにします。tsファイルからjsを読み込めるようになります。逆は無理
    "allowJs": true,

    // jsファイルの形チェックもしたければtrueにしましょう。全部のエラーに対応しなければいけなくなるのでfalseがおすすめ
    "checkJs": false,

    // d.tsファイルのtypeチェックを無効化します。（falseだとnode_modules内でエラー出まくりました）
    "skipLibCheck": true,

    // 後述するモジュールと組み合わせるとtsファイルの行数でスタックが見られるので楽です
    "sourceMap": true,

    // デコレーター使いたい場合はtrueで。Reactで使っているので必要でした。
    "experimentalDecorators": true,

    // TypeScript 3.4以上で使えます。watchしながらのトランスパイルが爆速になります。付けない理由はない。
    "incremental": true,

    // ここから先はlint的な要素です

    // JavaScriptから移行する場合、この辺はfalseにしておかないとかなり辛いです。特にanyは無理です。
    "noImplicitAny": false,
    "noImplicitReturns": false,
    "noImplicitThis": false,

    // 使っていない変数が定義されてたら怒られるオプション。これはes-lintとかを導入していればトランスパイル自体はエラーにしなくてもいいかもしれません。
    "noUnusedLocals": true,

    // ここも移行していく場合とりあえずfalseでいいと思います
    "strictNullChecks": false,　// trueにすると例えば`number`にnullやundefinedを代入できなくします
    "strictFunctionTypes": false,
    "strictBindCallApply": false,
    "strictPropertyInitialization": false,
  },
}

3. 変更があったらサーバーを自動で再起動とかしたい

全部入りなts-nodeを使う方法もありますが、今回はtscコマンド + nodemonを使います
トランスパイル済みjsは./distに吐き出されるものとします。

nodemon.jsonを作ります。distをwatchして、変更があれば"exec"に書かれている内容を実行します。この場合server.jsの再起動です
"restartable"はその文字を打つとexecを強制的に再実行します。あんま使いませんがたまに便利です。

nodemon.json

{
  "restartable": "rs",
  "watch": [
    "./dist",
  ],
  "exec": "node ./dist/server.js"
}

まずtypescriptのトランスパイルを実行します
yarn tsc --watch -p tsconfig.json

次にnodemonを起動します
nodemon --config ./nodemon.json

これで、
ファイルを変更したらtypescriptがトランスパイル -> 吐き出されたファイルをnodemonが検知して再起動
となり効率の良い開発が可能になります。