TypeScriptにおけるオブジェクトの配列

TypeScriptの配列はプリミティブだけでなく、 特定の型のオブジェクトを含むこともできます。 そのような配列を操作する方法を例を挙げて見てみましょう。

ユーザー配列

ユーザーを定義するインターフェースがあるとします：

typescriptinterface User {
  name: string,
  age: number
}

その内容物の型としてユーザーオブジェクト（つまり、 我々のインターフェースを実装したオブジェクト）を指定して 配列を宣言しましょう：

typescriptlet arr: User[] = [];

指定された型のデータで配列を埋めましょう：

typescriptarr.push({name: 'john', age: 30});
arr.push({name: 'eric', age: 40});

日付配列

日付の配列を格納する配列を宣言しましょう：

typescriptlet arr: Date[] = [];

この配列を日付で埋めましょう：

typescriptarr.push(new Date(2030, 11, 31));
arr.push(new Date(2020, 11, 31));

DOM要素配列

DOM要素を含む配列を宣言しましょう：

typescriptlet arr: HTMLElement[] = [];

データで配列を埋めましょう：

typescriptlet lst: NodeList = document.querySelectorAll('div');
let arr: HTMLElement[] = Array.from(lst);

実践問題