ドレスコードのような型：オブジェクトと配列｜第3回 TypeScript入門

著者: 管理者 / 2025-08-20 (更新: 2025-08-20)

先生、第2回では紅茶カップを例に「型注釈」と「型推論」を学びましたの☕
とても分かりやすくて、ラベルを貼る安心感を実感できましたわ✨
今日はさらに進んで、もっと複雑なものに型をつけるお話を伺いたいですの。

はい。では今回は オブジェクトと配列 を取り上げましょう。
単なるカップや砂糖だけでなく、「お茶会の全体のルール」を整えるようなイメージです。
ドレスコードのように「全員が守る決まりごと」が型にあたります。

📝 解説：オブジェクトの型

オブジェクトとは「複数の情報をまとめた入れ物」です。

たとえば「お嬢様の紅茶注文」をオブジェクトで表すと：

let order = {
  tea: "アールグレイ",
  sugar: 2,
  milk: true
};

これに型をつけると：

let order: {
  tea: string;
  sugar: number;
  milk: boolean;
} = {
  tea: "アールグレイ",
  sugar: 2,
  milk: true
};

tea: string → 紅茶の種類は文字列
sugar: number → 砂糖の数は数値
milk: boolean → ミルクを入れるかどうかは真偽値

まあ！「ドレスは青」「帽子は白」「靴は黒」といった具合に、
お茶会の装いまで細かく指定しているようですわね👗👒👠

お見事なたとえです。オブジェクトの型は「持ち物リスト」や「ドレスコード」のように、
項目ごとにどんな形式であるべきかを示すのです。

📝 解説：配列の型

配列は「同じ種類のものを並べるリスト」です。

let teas: string[] = ["アールグレイ", "ダージリン", "セイロン"];
let sugars: number[] = [1, 2, 3];

string[] → 文字列だけを入れられる配列
number[] → 数値だけを入れられる配列

ふむふむ…。つまり「招待客リスト」を作るときに、
「名前だけ」「年齢だけ」と決めておけば、混乱がありませんのね。📜✨

はい、その通りです。配列の型は「このリストはすべて同じ形式で統一される」というお約束なのです。

📝 解説：オブジェクトの配列

実際には「招待客それぞれにドレスや帽子の情報がある」といった複雑な形も扱います。

let guests: {
  name: string;
  dressColor: string;
  hasHat: boolean;
}[] = [
  { name: "Alice", dressColor: "blue", hasHat: true },
  { name: "Bella", dressColor: "green", hasHat: false }
];

ここでは「招待客のリスト」が配列になっていて、
一人ひとりの情報はオブジェクトとして型で定義されています。

まあ！なんて素敵な例ですの✨
これで「お茶会の招待客は必ず名前とドレスの色を持ち、帽子をかぶるかどうかも決まっている」と、
一目で分かりますわね。

はい、型を決めておけば「名前を忘れてしまった招待客」や「靴の色だけ書いてある人」が紛れ込むことを防げます。
まさにドレスコードの役割です。

📝 解説：型エイリアス

オブジェクトの型を毎回書くのは大変です。
そこで 型エイリアス (Type Alias) を使うと便利です。

type Guest = {
  name: string;
  dressColor: string;
  hasHat: boolean;
};

let guests: Guest[] = [
  { name: "Alice", dressColor: "blue", hasHat: true },
  { name: "Bella", dressColor: "green", hasHat: false }
];