[TypeScript] tuple 타입

코딩애플님의 '빠르게 마스터하는 타입스크립트' 강의를 수강한 뒤 정리를 위해 작성한 글입니다.

tuple

자바스크립트에는 없지만, 타입스크립트에서만 존재하는 타입 중 하나로 '튜플' 이 있습니다.

let cat : [string, string]; // tuple 타입
cat = ['bangul', '얼룩고양이']

cat = ['baduk', true] // compile error!

tuple 타입은 array 타입과 유사하게 생겼으나, 길이와 순서가 정해져 있다는 차이점이 있습니다. 튜플 안에서 선언했던 타입의 순서와 다르게 데이터를 넣으려고 하면 컴파일 에러가 발생합니다.

tuple과 rest parameter 사용하기

function paramsFunc(...params :string[]){
  console.log(params)
}

paramsFunc('a1', 'a2');
paramsFunc('b1');
paramsFunc('c1', 'c2', 'c3', 'c4')

함수 정의 시, 파라미터가 항상 고정된 갯수로 들어오지 않을 때는 rest parameter를 사용하면 유연한 갯수의 파라미터를 받을 수 있습니다.

rest parameter를 사용하면 파라미터가 배열에 담겨 오는데, tuple 타입을 배열에 쓸 수 있다는 것을 이용해 파라미터 타입 순서를 엄격하게 체크하는 것이 가능합니다.

function paramsFunc(...params :[boolean, string] ){
  console.log(params)
}

paramsFunc(true, 'bangul');
paramsFunc('bangul', false); // compile error!

Optional parameter

type Cat = [string, number?, string?];
let bangul = ['김방울', 5, '얼룩고양이', '귀여움'];

튜플 뒤 자료형에 ? 옵션 기호를 붙여서 옵션으로 들어가는 자료형을 지정해 줄 수 있습니다. 단 뒤에서부터만 붙일 수 있으며, 앞이나 중간에서부터는 붙일 수 없습니다.

type Cat = [string, number?, string]; // error!
let bangul = ['김방울', 5, '얼룩고양이', '귀여움'];

spread 연산자 사용 시 tuple 활용

let cat = ['방울이', '밥울이', '김방울'];
let cat2 = ['중복이', ...cat];  

위 코드의 cat2 배열은 ['중복이'] 배열에 cat 배열을 합친 것과 같습니다.

이처럼 spread 연산자로 배열을 합칠 때가 있는데, tuple로 타입 지정을 할 수 있습니다.

let cat = ['방울이', '밥울이', '김방울'];
let cat2 :[string, ...string[]] = ['중복이', ...cat];  

다음과 같이 rest parameter + tuple 타입 지정을 사용하면 '아직 여기에 몇개의 자료가 들어올지 모른다' 는 느낌으로 유연하게 타입 지정이 가능합니다.

참고자료

• https://codingapple.com/course/typescript-crash-course/ (빠르게 마스터하는 타입스크립트)