tsconfigのきほん｜基礎を学ぶ

設定ファイルは 1 枚だけ

TypeScript のプロジェクトには tsconfig.json という設定ファイルが 1 枚あります。tsc はこのファイルを読んで、どのファイルを、どのくらい厳しく検査するかを決めます。

最小限だと、これくらいの中身です。

{
  "compilerOptions": {
    "target": "ES2020",
    "strict": true
  }
}

項目はたくさんありますが、いま覚える価値があるのは strict の 1 つだけです。

strict は単独の設定ではなく、細かい検査をまとめて入り切りするスイッチです。中でも効くのが次の 2 つです。

1 つ目は noImplicitAny です。型を書かなかった引数が黙って any になるのを禁止します。2 つ目は strictNullChecks です。null や undefined が入るかもしれない値を、そのまま使うのを禁止します。

このコースはずっと strict を on にした状態で進めてきました。第1章から「引数に型が無いとエラーになる」と言ってきたのは、この設定のおかげです。

同じコードが、設定ひとつでこれだけ変わります。

function workLabel(title, count) {
  return title + "ほか" + count + "件";
}

const nickname: string | null = null;
console.log(nickname.trim());

strict が off のときは、どちらの行も何も言われません。title と count は any になり、nickname.trim() は実行時に落ちます。

strict を on にすると、その場で 3 つ指摘されます。

Parameter 'title' implicitly has an 'any' type.
Parameter 'count' implicitly has an 'any' type.
'nickname' is possibly 'null'.

どれも、off のときは動いてから壊れていた事故です。

新しく作るプロジェクトは、必ず strict: true で始めてください。あとから on にすると、それまでに書いたコード全部からエラーが噴き出して、手が付けられなくなります。

逆に、すでにある JavaScript を移していく場合は、一時的に緩めることもあります。その進め方が次のレッスンの話です。

手元のエディタで tsconfig.json の strict を false にして、上のコードを貼ってみてください。赤い波線が消えます。そのあと true に戻して、波線が戻ることを確かめます。型がどこまで守ってくれるかは、自分で決められる、というのが今回の要点です。