段階的に有効化する TypeScript の strict オプション入門

TypeScript の strict モードは、コードの安全性を高める強力な機能ですが、いきなり全部有効にするとエラーが大量に出てしまい、初心者にはハードルが高く感じられます。そこで「段階的に strict を有効化」する手順をご紹介します。まずはプロジェクト全体の tsconfig.json を作成し、最も緩やかな設定から始めましょう。

1. 基本の tsconfig を作る

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": false,               // まずは無効にしておく
    "noEmit": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"]
}

この状態では TypeScript の型チェックは通常通りですが、strict 系のチェックは行われません。エラーが出にくいので、既存コードをそのままビルドできます。

2. strictNullChecks をオンにする

次に安全性が高まる代表的なオプション、strictNullChecks を有効にします。null と undefined が型に含まれるかどうかを明示的に判定できるようになるので、バグの予防に効果的です。

{
  "compilerOptions": {
    "strict": false,
    "strictNullChecks": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "alwaysStrict": false,
    "strictBindCallApply": false,
    "strictFunctionTypes": false,
    "strictPropertyInitialization": false
  }
}

ポイント

• null や undefined が混入しやすい箇所（API のレスポンスや DOM 操作）でエラーが出始めます。
• エラーが出たら、?（オプショナルチェーン）や型ガードで対処しましょう。

3. noImplicitAny を有効にする

次は暗黙的な any を禁止する noImplicitAny をオンにします。型注釈が抜けている変数はコンパイルエラーになるため、意図しない型の流出を防げます。

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitThis": false,
    "alwaysStrict": false,
    "strictBindCallApply": false,
    "strictFunctionTypes": false,
    "strictPropertyInitialization": false
  }
}

対処例

// before
function greet(name) {
  console.log(`Hello, ${name}`);
}

// after
function greet(name: string) {
  console.log(`Hello, ${name}`);
}

4. 残りの strict 系オプションを順にオンにする

残りは以下の順で有効化すると、エラーの増加を段階的にコントロールしやすいです。

1. alwaysStrict – "use strict" を自動挿入
2. strictBindCallApply – bind/call/apply の型チェック
3. strictFunctionTypes – 関数パラメータの互換性チェック
4. strictPropertyInitialization – クラスプロパティの初期化チェック

最終的に strict: true を設定すれば、すべての strict オプションが有効になります。

{
  "compilerOptions": {
    "strict": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}

5. 実務での活用例

• CI パイプラインで tsc --noEmit を実行し、ビルド前に型エラーを検出。
• GitHub Actions と連携すれば、プルリクエストごとに strict がすべて有効な状態でテストできます。
• Docker コンテナ内で同じ tsconfig.json を共有すれば、ローカルと本番環境で同一の型チェックが保証されます。

まとめ

段階的に strict を有効化すれば、初心者でも無理なく型安全性を高められます。まずは strictNullChecks と noImplicitAny から始め、エラーに慣れたら残りのオプションを順にオンにしていきましょう。コードベースが大きくなるほど、strict がもたらす安心感は大きくなります。

詳しい手順はこちら → https://felixstudio0.gumroad.com/?utm_source=qiita&utm_medium=github_actions&utm_campaign=2026-q1&utm_content=qiita-footer