はじめに
前回
TypeScriptの真価が発揮されるのは、複数の型が複雑に絡むときである。
その第一歩が、「配列型」「オブジェクト型」「ユニオン型」の理解である。
これらを使いこなせば、現実のデータ構造をTypeScript上で精密に表現できるようになる。
今回はこの3つを中心に、実践的な使い方と設計上の考え方を整理する。
配列型：繰り返しの構造に型を与える
配列は同じ型の要素が並ぶ構造である。型の表現は以下のようになる。
const numbers: number[] = [1, 2, 3];
const names: string[] = ["Alice", "Bob"];
別の書き方として、ジェネリック形式もある。
const values: Array<boolean> = [true, false];
通常は number[] などの形式が読みやすいため、そちらが好まれる。
多次元配列
const matrix: number[][] = [[1, 2], [3, 4]];
構造が深くなるほど、どの階層にどの型があるかを明確にしておく必要がある。
オブジェクト型：構造に意味を持たせる
現実のデータは、複数の情報が1つの塊として表現されることが多い。
オブジェクト型はその基本単位である。
const user: { id: number; name: string; isActive: boolean } = {
id: 1,
name: "Yuki",
isActive: true
};
ただし、同じような型を何度も書く場合は、型エイリアスを使うべきである。
type User = {
id: number;
name: string;
isActive: boolean;
};
const user1: User = { id: 1, name: "Taro", isActive: true };
このようにすることで、可読性と保守性が向上する。
ユニオン型：1つの値が複数の型を取り得るとき
ユニオン型は、 「この値は A または B の型を取る」 というケースを明示できる。
let status: "success" | "error" | "loading";
status = "success";
status = "error";
これは文字列リテラルのユニオンであり、“限定された選択肢” として非常に強力である。
もちろん、プリミティブ型にも使える。
let value: number | string;
value = 10;
value = "ten";
このような使い方は、柔軟性と型安全のバランスを取る上で重要である。
実務上の設計ポイント
- 配列に対しては要素型を明確に定義すること
- オブジェクトは型エイリアスまたはinterfaceで共通化すること
- ユニオン型は限定された入力値（状態や分類）に使うと有効である
特にユニオン型は、状態管理や条件分岐において “漏れのない設計” を可能にする。
ただし、乱用は危険。変数に入る型は1つに限定する方がもちろん良い。
まとめ：複数の型を制御する技術を身につける
配列・オブジェクト・ユニオン型は、
- 複数のデータをどうまとめるか？
- 構造にどう意味を持たせるか？
- 選択肢をどう制限するか？
という観点から、TypeScript設計の核心と言える。
この3つをマスターすることで、コードの「意図」「設計意識」「防御力」は飛躍的に向上する。
次回予告
『TSの鬼 第4回：anyは敵か味方か？unknownとの違いを知れ』
次回はTypeScriptの闇とされるany型と、意外と知られていないunknown型の違いについて深堀りする。