【入門編】TypeScriptのコンパイルオプション:型チェックを厳格化する設定の全貌 – TypeScript コア・型システムの基礎解析バイブル

こんにちは!フロントエンドからNode.jsの深部まで、TypeScriptの荒波を長年航海してきたチーフアーキテクトの先輩です。

他のプログラミング言語からTypeScriptの世界へ飛び込んだとき、多くの人がこう呟きます。
「なんだか動くけれど、本当に型安全なコードが書けているのだろうか?」と。

実は、TypeScriptの本当のポテンシャルは、`tsconfig.json` というコンパイラへの指令書に隠されています。初期状態のままだと、TypeScriptはただの「少しおせっかいなJavaScript」にすぎません。しかし、これから解説する「厳格化(Strict)フラグ」を正しく理解し、全開放した瞬間から、TypeScriptはあなたのコードの致命傷を未然に防ぐ「最強の守護神」へと変貌します。

ここをクリアすれば、TypeScriptの基本はバッチリマスターできますよ。それでは、型システムの深淵へ一緒に出発しましょう!

—

1. `tsconfig.json` と型チェックの正体

TypeScriptのコードは、最終的にJavaScriptへとコンパイル(変換)されます。その際、私たちが書いた型はすべて消え去ります。つまり、型チェックとは「実行される前のコンパイル段階で、バグの卵を徹底的に摘み取るための静的解析」です。

この解析の厳しさをコントロールするのが `tsconfig.json` の `compilerOptions` です。
まずは、実務で絶対に避けて通れない「厳格化フラグのフルセット」を見てみましょう。

{
“compilerOptions”: {
“target”: “ESNext”,
“module”: “NodeNext”,

/ — ここからが今回の核心:厳格な型チェック設定 — /
“strict”: true, // すべての厳格な型チェックを有効化する
“noImplicitAny”: true, // 型が推論できない場合に ‘any’ とみなすことを禁止
“strictNullChecks”: true, // null や undefined を厳格に区別する
“strictFunctionTypes”: true, // 関数の引数の型を厳格にチェックする
“noUncheckedIndexedAccess”: true // 配列やオブジェクトのインデックスアクセスに undefined を付与
}
}

「`”strict”: true` を入れておけば安心なんでしょ?」と思ったそこのあなた。半分正解ですが、プロの現場ではさらに踏み込みます。それぞれのフラグがコードの運命をどう変えるのか、具体例を交えて解き明かしていきますね。

—

2. 恐るべき `any` の魔力:`noImplicitAny`

JavaScriptから移行したばかりの開発者が最初にハマる罠がこれです。TypeScriptが型を推論できないとき、勝手に `any`(なんでもありの型)とみなしてしまう現象を「暗黙の `any`」と呼びます。

陥りやすい罠

// noImplicitAny: false の場合、これでもエラーになりません
function calculateTax(price, rate) {
return price rate;
}

// 呼び出し時に文字列を渡してしまっても、コンパイルエラーにならない(実行時バグの温床)
console.log(calculateTax(“1000″, 0.1)); // 実行結果: NaN

`”noImplicitAny”: true`(`strict: true`に含まれます)を設定すると、TypeScriptはこう怒ります。
> 「おいおい、`price` や `rate` の型がわからないから、安全性が保証できないよ!」

正しい書き方

// 引数と戻り値の型を明示する
function calculateTax(price: number, rate: number): number {
return price rate;
}

// 型が違うと、コンパイル時点で容赦なくエラーにしてくれます
// Error: Argument of type ‘string’ is not assignable to parameter of type ‘number’.
// console.log(calculateTax(“1000”, 0.1));

型を明示することは、未来の自分やチームメンバーへの最高のラブレター(仕様書)になります。

—

3. すべての元凶? `null` と `undefined` の戦い:`strictNullChecks`

プログラミング言語のトンプソン賞(C言語の作者)が「10億ドルの間違い」と呼んだのが、この `null` や `undefined` の扱いです。`strict` がオフの世界では、あらゆる型にこっそり `null` や `undefined` が混入します。

陥りやすい罠

interface User {
name: string;
}

function getGreeting(user: User): string {
return `こんにちは、${user.name}さん!`;
}

// データベースからユーザーが見つからなかったとする
const user = findUserById(999); // 戻り値は User | null とする

// strictNullChecks がオフだと、コンパイルは通るが…
getGreeting(user); // 実行時に user が null のため、プロパティアクセスで即死!
// TypeError: Cannot read properties of null (reading ‘name’)

正しい書き方(`strictNullChecks: true`)

この設定を有効にすると、`null` や `undefined` は「完全に別の型」として扱われます。

interface User {
name: string;
}

const user = findUserById(999); // 型は User | null

if (user !== null) {
// このブロック内では、TypeScriptが賢く「user は確実に User型だ」と推論(ガード)してくれる
console.log(getGreeting(user));
} else {
console.log(“ユーザーが見つかりませんでした。”);
}

「もしや `null` かもしれない」という不安を、コンパイラが完全にシャットアウトしてくれる。これが `strictNullChecks` の圧倒的な美しさです。

—

4. プロの現場で差がつく隠し味:`noUncheckedIndexedAccess`

最後に、中級者から上級者へのステップアップとして絶対に知っておいてほしい設定を紹介します。それが `noUncheckedIndexedAccess` です。

配列やオブジェクトの「見えない罠」

通常、配列から要素を取り出すとき、TypeScriptは「その要素は必ず存在する」と仮定して型を返します。

const numbers: number[] = [10, 20, 30];

// 型は number として推論される
const third = numbers[2];

// では、存在しないインデックスを指定したらどうなる?
const outOfBounds = numbers[99]; // 型は number のまま(うそつき!)
console.log(outOfBounds.toFixed(2)); // 実行時にクラッシュ!

`”noUncheckedIndexedAccess”: true` を有効にすると、配列やインデックスシグネチャへのアクセスには、自動的に `undefined` が付与されるようになります。

const numbers: number[] = [10, 20, 30];

// 型が number | undefined に化ける!
const outOfBounds = numbers[99];

// だから、ちゃんとチェックしないとコンパイルエラーになる
if (outOfBounds !== undefined) {
console.log(outOfBounds.toFixed(2)); // 安全!
}

「配列の要素があるとは限らない」という現実世界の厳しさを、そのまま型に反映させる。これぞプロフェッショナルの設定です。

—

まとめ

今回は、TypeScriptの型チェックを極限まで厳格化するためのコンパイルオプションについて解説しました。

  • `noImplicitAny`: 「型は推論させず、ボヤキを許さない」
  • `strictNullChecks`: 「`null`/`undefined` の魔手からコードを守る」
  • `noUncheckedIndexedAccess`: 「配列アクセスの不確実性に立ち向かう」

最初、これらのエラーをすべて有効にすると、既存のコードから赤波線(エラー)が大量発生して絶望するかもしれません。しかし、その赤波線こそが、本番環境であなたを救うセーフティネットです。

ここをクリアすれば、TypeScriptの基本はバッチリマスターできますよ。ぜひ次のプロジェクトでは `tsconfig.json` の `strict: true`、そして一歩進んだ設定に挑戦してみてください。あなたのコードベースが、圧倒的に堅牢な要塞へと生まれ変わるはずです!

タイトルとURLをコピーしました