tsconfig-options

使用している TypeScript オプションを把握する

概要

TypeScript の動作は、設定に大きく左右されます。

noImplicitAny や strictNullChecks などのオプションによって、同じコードでも型チェックに合格したり失敗したりします。TypeScript を効果的に使うために、使用しているオプションを把握しましょう。

このスキルを使う場面

• 新しい TypeScript プロジェクトを設定するとき
• コードが想定と異なる動作をするとき
• 他の人には見えない型エラーをデバッグするとき
• 厳格さのレベルを決めるとき

絶対に守るべきルール

ALWAYS use a tsconfig.json and enable strict mode for new projects.

主な設定：

• noImplicitAny：TypeScript が型を推論できない場合に、型の明示を必須にします
• strictNullChecks：型で null／undefined を明示します
• strict：すべての厳格なチェックを有効にします（推奨）

最も重要なオプション

noImplicitAny

暗黙的な any 型を TypeScript が許可するかどうかを制御します。

// With noImplicitAny: false (OFF) - No error
function add(a, b) {
  return a + b;
}
// a and b are implicitly 'any' - dangerous!

// With noImplicitAny: true (ON) - Error
function add(a, b) {
  //         ~  Parameter 'a' implicitly has an 'any' type
  //            ~  Parameter 'b' implicitly has an 'any' type
  return a + b;
}

// Fixed:
function add(a: number, b: number) {
  return a + b;
}

strictNullChecks

すべての型で null／undefined を許可するかどうかを制御します。

// With strictNullChecks: false (OFF)
const x: number = null;  // OK, but dangerous

// With strictNullChecks: true (ON)
const x: number = null;
//    ~ Type 'null' is not assignable to type 'number'

// Fixed - be explicit:
const x: number | null = null;  // OK

Nullable 値の扱い

// strictNullChecks forces you to handle null:
const statusEl = document.getElementById('status');

statusEl.textContent = 'Ready';
// ~~~~~~ 'statusEl' is possibly 'null'.

// Option 1: Check for null
if (statusEl) {
  statusEl.textContent = 'Ready';  // OK
}

// Option 2: Assert non-null (use carefully!)
statusEl!.textContent = 'Ready';  // OK

推奨設定

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,  // Enables all strict checks
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

tsc --init で作成します。

Strict モードに含まれる設定

strict フラグを有効にすると、次の設定が有効になります。

• noImplicitAny
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• strictPropertyInitialization
• noImplicitThis
• alwaysStrict

Strict よりも厳格な設定

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true  // Extra safety for array/object access
  }
}

noUncheckedIndexedAccess を有効にすると：

const arr = ['a', 'b', 'c'];
arr[0].toUpperCase();  // Error: Object is possibly 'undefined'

// Must check:
const first = arr[0];
if (first) {
  first.toUpperCase();  // OK
}

移行手順

既存の JavaScript プロジェクトの場合：

1. 最小限の設定から始めます
2. noImplicitAny を有効にします
3. 暗黙的な any に関するエラーをすべて修正します
4. strictNullChecks を有効にします
5. 最終的に完全な strict モードにします

圧力に負けないためのプロトコル

1. 「Strict モードは難しすぎる」

圧力：「Strict モードにするとエラーが多すぎます」

**回答：**それぞれのエラーは、潜在的なバグです。段階的に修正しましょう。

**対応：**Strict を有効にし、ファイルを 1 つずつ修正します。

2. 「すべてに型を付ける必要はない」

圧力：「暗黙的な any で問題ありません。型は把握しています」

**回答：**把握しているのはあなたです。TypeScript には分かりません。将来の保守担当者にも分かりません。

対応：noImplicitAny を有効にします。型はドキュメントです。

危険信号 — 作業を止めて再検討する

• プロジェクトに tsconfig.json がない
• 設定ファイルではなくコマンドラインフラグを使っている
• 移行計画がないのに strict: false にしている
• チームメンバーごとに異なる設定を使っている

クイックリファレンス

オプション	効果	推奨
strict	すべての厳格なチェックを有効にする	新規プロジェクトでは常に有効にする
noImplicitAny	型の明示を必須にする	必須
strictNullChecks	null／undefined の明示を必須にする	必須
noUncheckedIndexedAccess	配列へのアクセスで undefined になる可能性がある	有効化を検討する

要点

オプションを把握しましょう。Strict モードを有効にしましょう。

TypeScript の動作は設定に左右されます。tsconfig.json を使い、新規プロジェクトでは Strict モードを有効にし、noImplicitAny と strictNullChecks の役割を理解しましょう。チーム全体で一貫した設定にすることが不可欠です。

参考資料

Dan Vanderkam 著『Effective TypeScript』の項目 2「使用している TypeScript オプションを把握する」に基づいています。