[TypeScript] Tuple type과 rest parameter

💻 Tuple type

tuple은 javascript에서는 지원하지않는 타입으로, typescript에서는 배열 타입을 보다 특수한 형태로 사용할 수 있는 tuple타입을 지원한다. 명시적으로 지정된 형식에 따라 아이템 순서를 설정하고, 추가되는 아이템 또한 tuple에 명시된 타입만 사용 가능하다.

• 예시 #1

let rule:[string,boolean]=['dog',true]
console.log(rule); // output : ["dog", true]

위의 예시 #1에서 첫 자료는 무조건 string이고 두번째 자료는 무조건 boolean만 허용해주며 외에 다른 타입이 들어오면 에러로 잡아준다.

🖤 rest parameter

-rest parameter: 매개변수 이름 앞에 세 개의 점 ...을 붙여서 정의한 매개변수를 의미하며 함수에 전달된 인수들의 목록을 배열로 전달받는다.

• 예시

let arr1 = [1,2,3]
let arr2 = [4,5]
let restArr=[...arr1,...arr2]
console.log(restArr)

• typescript에서의 rest 파라미터

function 함수(...x :string[]){
  console.log(x)
}

typescript에서 함수정의할때 파라미터 왼쪽에 점 3개를 붙이면 파라미터가 몇 개들어올지 모른다는 뜻으로 사용된다.

• typescript에서의 rest 파라미터 + tuple

function 함수(...x:[string,number]){
	console.log(x)
}
함수('kim',0318) 
함수('kim',03,18) // 에러
함수('kim','gyu','ri') // 에러

rest parameter를 엄격하게 사용가능하다. 일반 파라미터 2개를 넣는 것과 기능상 다를 바 없지만 차이는 rest parameter를 쓰면 파라미터가 전부 array에 담겨서 온다.

🖤 tuple 옵션

type codeNum = [number,number?,number?];
let Num01:codeNum = [10];
let Num02:codeNum = [10,20];
let Num03:codeNum = [10,20,30];
let err:codeNum = [10,20,30,40]; // 에러

❗ ?옵션은 array 중간에 올수없고 아이템의 마지막 혹은 마지막부터 사용할 수 있다.

🖤 array 2개를 spread연산자로 합칠때 타입지정

let arr01 = [1,2,3]
let arr02:[number,number,...number[]] = [10,20,...arr01]

// rest parameter랑 유사하게 활용가능
let arr03 :[number, number, ...number[]] = [4,5,6,7,8,9,10]  
let arr:[string,number,...boolean] = ['아메리카노', 4000, true, false, true, true, false, true]

🖤 활용

• 파라미터중 문자와 숫자를 따로 모아 리턴해주는 함수를 만들어보자. (파라미터는 갯수제한이없다.)

function 분류기(...x:(number|string)[]){
  let res:[string[],number[]]=[[],[]];
  x.forEach(item=>{
    if(typeof item==='string'){
      res[0].push(item)
    }else{
      res[1].push(item)
    }
  })
  return console.log(res)
}
분류기('규',3,'리',18) // output : [['규','리'],[3,18]]