【入門編】 tsconfigのexactOptionalPropertyTypesオプション – TypeScript実践ガイド

やあ。TypeScriptの世界へようこそ。
日々コードを書いていると、時々「あれ？これって中身が入っていないのか、それとも『わざと空っぽにしました』という意味なのか、どっちなんだろう？」と迷う瞬間はないかな？

今日は、そんなモヤモヤをスッキリ解決してくれる、ちょっと玄人好みの設定`exactOptionalPropertyTypes`についてお話しするよ。

難しい設定に見えるかもしれないけれど、実は「お部屋の片付け」と同じくらいシンプルな話なんだ。リラックスして聞いていってね。

—

「ない」のにも、種類がある？

TypeScriptには、オプショナルプロパティという便利な機能があるよね。`?` をつけるやつだ。

interface User {
name: string;
age?: number; // 「年齢はあってもなくてもいいよ」という意味
}

ここで、ちょっと意地悪な想像をしてみよう。
「年齢がわからない」状態と、「年齢は空っぽ（undefined）です」とわざわざ宣言する状態。これらをTypeScriptは、デフォルトだと「まあ、どっちも似たようなもんでしょ？」と大目に見てしまうんだ。

でも、大規模なシステムやチーム開発では、この「曖昧さ」がバグの温床になることがある。そこで登場するのが、今回紹介する `exactOptionalPropertyTypes` だ。

—

宅配便で例えてみよう

想像してみて。君がネットショップで注文した商品が届くとするよ。

1. プロパティが存在しない状態（`undefined`を代入すらしていない）

「備考欄」がそもそも画面にない状態。配送員さんは「特に何も指示はないんだな」と判断できる。

2. プロパティに `undefined` をわざわざ代入した状態

「備考欄」はあるのに、中身を「空（undefined）」で埋めて提出した状態。「わざわざ空であることを伝えたかったのかな？」と、受け取る側は少し警戒するよね。

この設定を `true` にすると、TypeScriptは「『なくてもいい』と言った場所に、わざわざ『空っぽ（undefined）』を突っ込むのは禁止！」と厳しくチェックしてくれるようになるんだ。

—

実際に動かしてみよう

`tsconfig.json` の `compilerOptions` に以下を書き加えるだけで準備は完了。

{
“compilerOptions”: {
“exactOptionalPropertyTypes”: true
}
}

では、コードを見てみよう。

interface User {
name: string;
age?: number;
}

// 普通の使い方（これはもちろんOK）
const user1: User = { name: “タロウ” };

// さあ、問題のケース！
// 「ageには値がない」ことを明示的にundefinedで伝えようとすると……？
const user2: User = {
name: “ハナコ”,
age: undefined, // ← ここでTypeScriptが「おっと！それは許可されてないよ！」と怒ってくれる
};

「えっ、怒られるの？困る！」と思ったかな？
大丈夫、安心してください。これは「君のコードをより安全にするための愛の鞭」なんだ。

この設定を有効にすることで、「プロパティが存在しないこと」と「プロパティは存在するけど中身が空であること」をコード上で明確に区別しなければならなくなる。 つまり、曖昧な状態が排除されて、プログラムの挙動が予測しやすくなるというわけだね。

—

なぜこの設定が「伝説級」に大事なのか

初心者のうちは、「エラーが出る＝面倒くさい」と感じるかもしれない。でも、開発が進めば進むほど、この「曖昧さの排除」が君を助けてくれることになるんだ。

例えば、Reactでコンポーネントに値を渡すときや、データベースにデータを保存するとき。「値が入っていない」ことの意図が明確であればあるほど、バグは減り、後からコードを見た自分やチームメイトが「ああ、ここは意図的に何も入れていないんだな」と瞬時に理解できる。

「なんとなく動く」から「厳密に正しく動く」へ。
この設定は、その第一歩なんだよ。

—

最後に：つまずいても大丈夫

もしこの設定をONにしてエラーがたくさん出てしまったら、焦らずに一つずつ確認していこう。「本当にここは `undefined` を代入する必要があるのか？それとも単にプロパティ自体を削除すればいいのか？」と問いかけるだけで、君のコードの質は格段に上がるはずだ。

TypeScriptは、君がより良い開発者になるための最高のコーチだ。エラーが出たら「教えてくれてありがとう！」とポジティブに受け取ってみてね。

また何か気になったら、いつでも聞いてほしい。君のエンジニアライフが、今日より少しだけ快適になりますように！