103. strictなTypeScript設定 — 壊れる前に知らせてくれる

ng new で作ったプロジェクトは、最初からTypeScriptの strict と、テンプレート用の strictTemplates が有効になっています。strictはnullやundefinedの扱いを厳密にチェックし、型の不明な変数を許しません。strictTemplatesは、その型チェックの対象をHTMLテンプレート内のバインディングにまで広げます。

実務でこの設定が効くのは、実行して初めて分かるバグをコンパイル時に発見できるからです。「nullかもしれない値」への参照はビルドが通らないので、画面が真っ白になる典型的な事故を未然に防げます。テンプレートでのプロパティ名の打ち間違いも、ブラウザで確認する前にエディタが教えてくれます。

初学者はエラーの多さに驚いてstrictを切りたくなりますが、それは「壊れる前に知らせてくれている」通知を切る行為です。エラーが出たら型の書き方を直すのが正道で、設定を緩めるのは最後の手段です。一度緩めた設定を後から厳しくするのは大変なので、既定のまま学ぶのが結果的に近道です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// tsconfig.json(抜粋)— ng new が既定で有効にする厳格な設定
{
  "compilerOptions": {
    // TypeScript の厳格チェック一式(null 安全・暗黙 any の禁止など)
    "strict": true
  },
  "angularCompilerOptions": {
    // HTML テンプレート内のバインディングまで型チェックする
    "strictTemplates": true
  }
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗