TypeScript：配列とオブジェクトの型

出力 == 3

const prices: number[] = [...] と書く。要素数は .length。

const prices: number[] = [128000, 3200, 8500];

console.log(prices.length);

配列の型は「中身の型 + []」。この配列には数値しか入らないことが、型として保証される。

解答 == B

number[] に文字列は含まれるか。

B

配列の中身も型チェックされる。JavaScriptなら何でも混ぜられるが、TypeScriptでは書いた時点で止められる。

出力 == ノートPC：128,000円

{ name: string; price: number } という型を書く。プロパティは name.price ではなく product.name のように取り出す。

const product: { name: string; price: number } = {
  name: "ノートPC",
  price: 128000,
};

console.log(`${product.name}：${product.price.toLocaleString()}円`);

オブジェクトの型はプロパティごとに指定する。セミコロンで区切って並べるのが基本の書き方。

const names: ____ = ["A", "B", "C"];

console.log(names.join("／"));

出力 == A／B／C

文字列の配列を表す型。string に角カッコを付ける。

string[]

Array<string> という書き方もあるが、実務では string[] のほうが一般的。

解答 == B

型に無いものは存在しないと見なされる。

B

JavaScriptなら undefined が返って静かに壊れる場面（JS07）。TypeScriptは書いた時点で止めてくれるので、つづり間違いも即座に分かる。

出力 == 合計：131,200円

型は { name: string; price: number }[] と書く。合計は reduce（JS09）。

const items: { name: string; price: number }[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
];

const total: number = items.reduce((sum, i) => sum + i.price, 0);

console.log(`合計：${total.toLocaleString()}円`);

これが実務で最も多いデータ構造。型を付けておくと、i.price と書いた時点でエディタが候補を出してくれる。

const fixed: ____ number[] = [1, 2, 3];

console.log(fixed.length);

出力 == 3

「読み取り専用」を意味する8文字のキーワード。

readonly

readonly を付けると push や代入ができなくなる。設定値やマスタデータなど、途中で書き換わってほしくないデータに使う。

解答 == B

型で定義したプロパティは必須か。

B

定義したプロパティはすべて必須。書き忘れると実行前にエラーになる。「あってもなくてもよい」項目には別の書き方がある（TS08）。

出力 == ノートPC

filter で絞り、map で名前を取り出す（JS09）。型は { name: string; price: number }[]。

const items: { name: string; price: number }[] = [
  { name: "ノートPC", price: 128000 },
  { name: "マウス", price: 3200 },
  { name: "キーボード", price: 8500 },
];

const expensive: string[] = items
  .filter((i) => i.price >= 10000)
  .map((i) => i.name);

console.log(expensive.join(", "));

filter と map の結果にも型が付く。map((i) => i.name) の結果は自動的に string[] と推論されるので、型注釈と食い違えばエラーになる。

出力 == 注文1：2点

型は { id: number; items: string[] } のように、配列を含めて書ける。

const order: { id: number; items: string[] } = {
  id: 1,
  items: ["ノートPC", "マウス"],
};

console.log(`注文${order.id}：${order.items.length}点`);

オブジェクトの中に配列を含められる。実務のデータは入れ子になっていることが多く、型もその構造をそのまま表現する。

出力3行が完全一致

3つのプロパティを持つ型を書き、forEach か for...of で回す。

const items: { name: string; price: number; stock: number }[] = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: 42 },
  { name: "キーボード", price: 8500, stock: 18 },
];

for (const item of items) {
  console.log(`${item.name}：${item.price.toLocaleString()}円（在庫${item.stock}個）`);
}

ループの中でも型が効いている。item の型は自動的に推論されるので、item.stok のような打ち間違いはその場で赤線になる。

出力 == 在庫総額：927,400円

reduce で price * stock を足し込む。

const items: { name: string; price: number; stock: number }[] = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: 42 },
  { name: "キーボード", price: 8500, stock: 18 },
];

const totalValue: number = items.reduce(
  (sum, i) => sum + i.price * i.stock,
  0
);

console.log(`在庫総額：${totalValue.toLocaleString()}円`);

reduce の初期値 0 が number なので、結果も number と推論される。型注釈と一致しなければエラーになるので、計算ミスに気づきやすい。

出力 == 要発注：ノートPC(5), キーボード(18)

filter で絞り、map で「名前(在庫)」の文字列を作って join する。

const items: { name: string; price: number; stock: number }[] = [
  { name: "ノートPC", price: 128000, stock: 5 },
  { name: "マウス", price: 3200, stock: 42 },
  { name: "キーボード", price: 8500, stock: 18 },
];

const lowStock: string[] = items
  .filter((i) => i.stock < 20)
  .map((i) => `${i.name}(${i.stock})`);

console.log(`要発注：${lowStock.join(", ")}`);

filter → map → join という流れは実務で頻出。途中の型が {...}[] から string[] へ変わっていく様子が、型注釈から読み取れる。

出力3行が完全一致

型は { name: string; area: string; orders: { product: string; qty: number }[] } のように入れ子で書く。

const customer: {
  name: string;
  area: string;
  orders: { product: string; qty: number }[];
} = {
  name: "田中商事",
  area: "東京",
  orders: [
    { product: "ノートPC", qty: 2 },
    { product: "マウス", qty: 5 },
  ],
};

console.log(`${customer.name}（${customer.area}）`);

for (const order of customer.orders) {
  console.log(`${order.product} × ${order.qty}`);
}

型は入れ子にできる。ただしこの書き方は長くなりすぎるのが弱点で、TS07で学ぶ type や interface を使うと、名前を付けて整理できる。

出力3行が完全一致

map で売上を含む新しい配列を作り、sort で並べ替える（JS06の比較関数に注意）。

const items: { name: string; price: number; qty: number }[] = [
  { name: "ノートPC", price: 128000, qty: 3 },
  { name: "マウス", price: 3200, qty: 15 },
  { name: "モニター", price: 45000, qty: 1 },
];

const sales: { name: string; total: number }[] = items
  .map((i) => ({ name: i.name, total: i.price * i.qty }))
  .sort((a, b) => b.total - a.total);

sales.forEach((s, index) => {
  console.log(`${index + 1}位 ${s.name}：${s.total.toLocaleString()}円`);
});

map で作った新しいオブジェクトの型も、型注釈と一致しなければエラーになる。(i) => ({ ... }) の丸カッコを忘れる罠（JS09）も、TypeScriptなら型が合わずに気づける。