TypeScriptのユニオン型を知ろう

概要

別記事を書くにあたりユニオン型を理解しようの会

ユニオン型とは

いくつかの要素をパイプ(|の記号)で繋げて複数のパターンを示す型。
参考: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types

type Hoge = string | number;

const hoge: Hoge = "hoge"; // ✅"hoge"はstring型に含まれるのでOK
const fuga: Hoge = 0; // ✅0はnumber型に含まれるのでOK
const piyo: Hoge = [1, 2, 3]; // 🚫[1,2,3]はstring型にもnumber型にも含まれないのでNG

のように型を設定し、そのどれか1個(メンバ)以上に当てはまるものがあればOKという感じ。
異なる型の引数を使用する関数とかで使用するとある程度の安全性も保ちながら対応できて楽。

function format(param: string | number): string {
  return `params: ${param}です`;
}
format("ほげ");
format(0);

また、リテラル型やkeyofと一緒に使うこともぼちぼちある。

リテラル型の例

type Hoge = "string" | "number";

const hoge: Hoge = "string"; // ✅"string"か"number"のどっちかなのでOK
const fuga: Hoge = "fuga"; // 🚫"string"か"number"のどっちでもないのでNG

keyofの利用例

type ObjectType = { name: string; age: number; message: string };
type Hoge = keyof ObjectType; // リテラル型 "name" | "age" | "message" のどれかになる

const hoge: Hoge = "name"; // ✅"name"か"age"か"message"のどれかなのでOK
const fuga: Hoge = "fuga"; // 🚫"name"か"age"か"message"のどれでもないのでNG