サンプルコードで身につける: 配列の型

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1数値の配列を作る

number[] という配列型の最も基本の形です。push で要素を追加できるのは number だけになり、違う型を混ぜようとした時点でエラーになることを確かめます。

TypeScript

const scores: number[] = [80, 92, 67];

scores.push(75);
console.log(scores);
console.log(scores[0]);

// scores.push("100点"); // number 以外の要素はエラー

2文字列の配列を順番に処理

string[] を for...of で1件ずつ取り出す例です。ループ変数も自動的に string になるので、文字列の連結や加工をそのまま安全に書けます。一覧表示の処理は実務で最頻出のパターンです。

TypeScript

const memberNames: string[] = ["Taro", "Hanako", "Jiro"];

// ループ変数 memberName も string として扱われる
for (const memberName of memberNames) {
  console.log(memberName + "さん");
}

console.log("メンバー数: " + memberNames.length);

3filter の結果も同じ型の配列

filter で要素を絞り込んでも、結果は元と同じ number[] と推論されます。条件に合うデータだけ取り出す処理は検索や集計の前処理として頻出で、注釈なしで型が引き継がれる便利さが分かる例です。

TypeScript

const allNumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8];

// filter の結果も number[] と推論される
const evenNumbers = allNumbers.filter(function (value) {
  return value % 2 === 0;
});

console.log(evenNumbers);
console.log("偶数の個数: " + evenNumbers.length);

4map で要素の型が変わる

number[] を map で加工すると、戻り値に応じて結果は string[] になります。「数値データを表示用の文字列に変換する」のは画面表示の定番処理で、型の連鎖を理解する代表例です。

TypeScript

const prices: number[] = [480, 1200, 350];

// number[] から string[] へ。結果の型は自動で切り替わる
const priceLabels = prices.map(function (price) {
  return price + "円";
});

console.log(priceLabels);
console.log(priceLabels.join(" / "));

5売上データの集計

日別売上の number[] をループで合計し、平均まで求める実務寄りの例です。配列に型が付いているおかげで、集計の途中に文字列が紛れ込む事故が起きないことが保証されます。

TypeScript

const dailySales: number[] = [12000, 15500, 9800, 20100, 17300];

let salesSum = 0;
for (const salesValue of dailySales) {
  salesSum = salesSum + salesValue;
}

const salesAverage = salesSum / dailySales.length;

console.log("合計: " + salesSum + "円");
console.log("平均: " + salesAverage.toFixed(1) + "円");