ユニオン型とナローイング

リテラル型の章で顔見せした "|"(ユニオン)を、この章で正式に扱います。そして後半が、この講座全体の山場、ナローイング(型の絞り込み) です。「チェックすると、TypeScriptが型を狭めてくれる」というこの仕組みが腹落ちすると、TypeScriptのコードの風景が変わって見えます。

ユニオン型

"|" でつないだ型は、「どちらかである」という型になります。リテラル値だけでなく、どんな型でもつなげます。

let id: string | number;   // 文字列のID("a123")も数値のID(42)も受け付ける

type User = { name: string; age: number };
let currentUser: User | null;   // ログイン中はUser、未ログインはnull

2つ目の "User | null" に注目してください。「値があるかもしれないし、無いかもしれない」。この形は実務で毎日見ることになります。検索して見つからないかもしれない、まだ読み込んでいないかもしれない、未ログインかもしれない。「無いかもしれない」を型で正直に表すのが、ユニオンの一番の仕事です。

ユニオンの制約

ここで、ユニオン型の大事な性質にぶつかります。

const format = (id: string | number) => {
  return id.toUpperCase();   // ← エラーが出る
};

エラー文は「Property ‘toUpperCase’ does not exist on type ‘string | number’(toUpperCaseは string | number 型に存在しません)」。idは文字列かもしれないが、数値かもしれない。 数値にtoUpperCaseは無いので、TypeScriptは安全側に倒して禁止します。ユニオン型の値には、全員が共通して持つ操作しかできないのです。

「じゃあ文字列のときだけ大文字にしたいときは?」それがナローイングです。

ナローイング