TypeScript) 배열과 튜플 타입

배열 타입

'배열'의 타입은 : []라고 지정하면... 될 줄 알았다. 그러나 이렇게 빈 배열을 타입으로 지정하면 '진짜 빈 배열' 이외에는 받지 못한다.

string[], number[], ... 이런 식으로 어떤 데이터를 받는지를 리터럴 앞에 써줘야 한다.

const person: string[] = ["Kim", "Han"]
// 문자열만 받는 배열 생성. 초기화 때 비워놔도 된다. 어차피 문자열 들어간다고 선언해놨으니 다른 데이터가 들어갈 가능성은 없다.

person.push(5) // 에러

 

만약 받을 수 있는 데이터 타입이 2개 이상이면 어떻게 할까? 유니언 타입을 [] 앞에 써두면 된다. ([]은 객체 리터럴이라 한다.)

const person: (string|number)[] = ["Kim", "Han"]
// 유니언타입을 리터럴 앞에 써두면 된다. 유니언 타입은 쉽게말해 '또는'으로 엮인 중복 타입이다.

person.push(5) // 가능

 

튜플 타입

타입스크립트 처음 배울 때 숫자와 문자만 받을 수 있는 배열을 [number, string]을 쓰면 될 줄 알았던 적이 있다.

그러나 이건 사실 tuple타입이다. 혼합될 수 있는 인자의 갯수와 타입을 제한하여 만든 형식이다.

숫자와 문자만 받을 수 있는 동적인 배열을 만들고 싶으면 위에 말한대로 유니언 타입을 쓰면 된다. (string|number)[]

const person: {
  name: string;
  age: number;
  hobby: string[];
  role: [number, string]; // 튜플 타입을 의미함
  // 첫 번째 인자는 숫자이고 두 번째 인자는 문자인 배열을 의미함.
  // 인자가 딱 정해져 있어야하면 튜플을 쓰는 것이 좋다.
  // 튜플의 인자 개수는 선언할 때 정하기 나름이다. 하여튼 선언은 자유지만 선언 이후엔 그대로 지켜야 된다.
} = {
  name: "bumang",
  age: 30,
  hobby: ["sport", "cooking"],
  role: [1, "gamer"],
};

위 예시는 role이란 프로퍼티에 [number, string]으로 튜플 타입을 지정해줬다.

 

참고사항

• 여기에 [1, "player"]는 지정해줄 수 있지만, ["player", 1]은 지정해줄 수 없다. string과 number의 위치가 뒤바뀌었기 때문이다.
• 또한 [10, true]도 넣을 수 없다. 두 번째 인자가 boolean이 아니라 string이어야 하기 때문이다.
• [10, "staff", false]도 넣을 수 없다. 지정된 인자가 아닌게 하나 껴있기 때문이다.