배열타입

배열타입 정의

우리가 기존에 선언하는 배열방식은 아래의 예제와 같습니다.

let arr = [1, 2, 3]

하지만 타입스크립트에서는 아래와 같습니다.

let arr: number[] = [1, 2, 3]

배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의합니다.

만약 문자열 배열을 정의 하고싶으시면은 아래와 같이 하시면 됩니다.

let strArr: string[] = ['hello', 'hi']

다양한 타입의 배열 정의하기

만약에 하나의 배열에 정수도 넣고싶고, 문자열도 넣고싶으면은 어떻게 하면될까요?
이럴때는 '|' 를 사용하시면 됩니다.

let multiArr: (number | string)[] = [1, 'hello']

이 '|' (바)는 수학시간에 배웠던 합집합(Union) 타입이라고 부릅니다.

다차원 배열 타입 정의하기

다음과 같이 2차원배열 타입도 정의할 수 있습니다.

let Arrs: number[][] = [
  [1, 2, 3],
  [4, 5],
]

튜플타입

튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다.
앞서 배열 타입을 정의하는 방법을 살펴보며 배열의 타입을 고정하는 방법은 살펴보았지만, 우리는 아직 배열의 길이까지 고정하는 방법은 모릅니다.

길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열) 타입은 다음과 같이 정의합니다.

let tup: [number, number] = [1, 2]

또 다음과 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 있습니다.

let tup2: [number, string, boolean] = [1, 'hello', true]

튜플을 사용하는 이유

다음과 같이 회원 정보를 2차원 배열로 저장하는 상황을 가정해 보겠습니다.

const users = [
  ['홍길동', 1],
  ['임꺽정', 2],
  ['우투리', 3],
]

제가 0번에는 이름, 1번은 아이디를 저장해두었습니다.
하지만 제 동기(동료)가 수정한다고 1번과 0번을 바꿔서 저장했습니다.

안타깝지만, 자바스크립트는 이 문제를 확인할 수 없습니다. 그러나 타입스크립트를 사용하면은 실수를 바로잡을 수 있습니다.

const users = [
  ['홍길동', 1],
  ['임꺽정', 2],
  ['우투리', 3],
  [4, '김이름'], //오류 발생
]