Typescript : Tuple type

array 자료의 타입을 지정할 때, 

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

위와 같이 지정해 주었었다.

 

tuple type을 통해서 보다 엄격하게 타입을 지정해 줄 수 있다.

인덱스 값에 맞춰서 어떤 순서에는 어떤 타입만 오게 할 수 있다.

 

const arr : [number, string] = [3, "글자"]

 

0번 인덱스에는 number, 1번 인덱스에는 string 타입만 올 수 있다. 위와 같이 사용하는 것이 tuple type이다.

 

 

- 옵션 지정이 가능하다.

다만 마지막 인덱스 값부터 지정을 해주어야 한다. 

중간 값에만 옵션을 지정했다고 하면 그 뒤부터는 엄격하게 인덱스 관리를 할 수 없기 때문이다.

(2번째 값만 옵션이라면 값의 유무에 따라 3번째 값이 2번째 값이 되어버릴 수 있음)

const arr : [number, string?, number?] = [1, "글자"]

 

- Rest parameter에도 지정이 가능하다.

 

function test(...x : [string, number]) {

	}

test함수에 들어가는 x인자는 [string, number] 두가지 값이 들어간 배열이어야 한다는 뜻.

 

 

- Spread Operator에도 지정 가능하다.

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

const newArr : [number, number, ...number[]] = [4,5, ...arr]

newArr에 들어오는 arr의 타입은 안에 몇개의 요소가 들어있을지는 모르지만, 숫자가 들어있는 어레이야 ! 라는 의미.

 

 

 

활용 예시 풀어보기

 

파라미터를 받아서 문자는 문자끼리, 숫자는 숫자끼리 들어있는 어레이를, 어레이안에 담아서 리턴하는 함수 만들기. 

함수('b', 5, 6, 8, 'a') 이렇게 사용할 경우 이 자리에 [ ['b', 'a'], [5, 6, 8] ] 이 return 되어야합니다.

 

나의 풀이

function test(...x : …(string|number)[]) {	

const stringArr : string[] = []
const numberArr : number[] =[]

x.foreach((element) => {

if (typeof element === “string”) {
	stringArr.push(element)
}) else {	
	numberArr.push(element)
	}

const answer : [string[], number[]] = [stringArr, numberArr]
return answer;

	}

 

풀이 예시

function 함수(...rest :(string|number)[]){

 

  let result :[string[], number[]] = [[],[]];

 

  rest.forEach((a)=>{

    if (typeof a === 'string') {

      result[0].push(a)

    } else {

      result[1].push(a)

    }

  })

 

  return result;  

}