본문 바로가기

TypeScript/기초

[TypeScript] Tuple Type

Tuple Type? 

Tuple Type은 array에 붙일 수 있는 타입인데, 자료의 위치까지 정확하게 지정할 수 있는 타입이다. 

let anything : [string, boolean];
anything = ['test', true];

[] 괄호 안에 타입을 적으면 Tuple Type이 된다. 

 

type Num = [number, number?, number?];
let num1 :Num = [10];
let num2 :Num = [10,20];
let num3 :Num = [10,20,30];

Tuple 안에서도 물음표를 사용해서 옵션이라고 표현을 할 수 있다. 

type Num = [number, number?, number];

하지만 물음표 옵션은 제일 마지막부터 순차적으로 붙일 수 있으며, 중간에 갑자기 나올 순 없다. 

 

Rest Parameter

function 함수(...x :[string, number] ){
  console.log(x)
}
함수('kim', 123)       //가능
함수('kim', 123, 456)  //에러
함수('kim', 'park')    //에러

함수에 파라미터를 넘길 때 점 3개를 붙이면 rest parameter라고 한다. 

아직 몇개의 파라미터가 들어갈지 확정되지 않은 상황에 사용하는 방식인데, Tuple을 사용하면 엄격하게 제어할 수 있다. 

 

하지만, 일반 파리미터를 2개 넣는 것과 기능상 차이는 없다. 

 

Spread 연산자를 합칠 때의 Tuple

let arr = [1,2,3]
let arr2 = [4,5, ...arr]

점 3개의 또다른 방식인 spread 연산자를 사용하면 array의 괄호를 벗겨주는 기능을 한다. 

그래서 배열을 합칠 때 사용하는 경우가 있다. 

 

그런 경우에는 Tuple 타입을 어떻게 지정해야할까? 

let arr = [1,2,3]
let arr2 :[number,number, ...number[]] = [4,5, ...arr]

Tuple Type에 점 3개를 붙여주면 아직 몇개의 데이터가 들어올지 모른다는 의미로 사용이 가능하다. 

반응형

'TypeScript > 기초' 카테고리의 다른 글

[TypeScript] d.ts  (2) 2022.07.12
[TypeScript] Declare & Ambient Module  (1) 2022.07.11
[TypeScript] React에서 사용하기_2편  (1) 2022.07.10
[TypeScript] React에서 사용하기_1편  (1) 2022.07.09
[TypeScript] Generic  (1) 2022.07.08