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);

실습 문제