코딩애플 Typescript - array 자료에 붙일 수 있는 tuple type

김원종·2024년 5월 8일
0

TypeScript 학습

목록 보기
22/28

array 자료에 타입을 지정하고 싶으면 string[] 이렇게 기입하라고 했다.
하지만 보다 구체적으로 타입지정하고싶을 때가 있다.
"첫 자료는 무조건 string, 둘째 자료는 무조건 number인 array"
이런 것도 가능하다. tuple 타입 쓰면 된다.

tuple 타입을 사용하면된다. 위처럼 배열 형식에 타입을 넣어두면 튜플타입이 되는것이다. 튜플타입은 자료의 순서 그리고 위치까지 엄격하게 array안에서 지정할수 있는것이다. 위처럼 지정하면 첫번째 자료는 무조건 string 두번째는 boolean이 들어와야 한다.

만약 다른 타입이 들어오면 에러로 알려준다. array를 만들때 정확하게 자료의 순서 위치까지 타입을 지정하고싶을때 사용하자. 모든 다른 타입넣기가 가능하다.

그리고 tuple안에 옵션 표시도 가능하다.? 표시를 해주면 값이 들어올수도 안들어올수도 있다는것을 표현한다.

그런데 옵션을 표현할때 이런식으로 표현하면 두번째 자료가 있을수도 없을수도 있다는것인데 그럼 순서의 개념이 깨질것이다. 2번째 자료가 없으면 마지막 자료는 2번째인지 3번째인지 알수가 없다. 그러니 옵션은 항상 마지막에 넣어야한다.

함수를 만들어 볼건데 ...은 함수를 사용할때 파라미터가 몇개가 들어올지 모를떄 사용하는 것이다.그럼 array의 자료로 값이 들어올것이다.

restParamete에도 타입이 지정이 가능한데 tuple타입도 가능하다.이렇게 rest parameter 타입을 지정시 tuple타입으로 지정하여 좀더 엄격한 타입을 지정할수 있다.

그런데 아래 함수처럼 적어도 똑같아 보인다 .단지 위 자료는 array에 담겨온다는점이 다를것이다.

만약 array를 합치고 싶으면 ...spread연산자를 사용하면 된다. 밑에...은 괄호를 벗겨달라는 뜻이다.

타입을 지정할때도 rest랑 비슷하다. array들어오는데 몇개가 들어올지 모를때 사용하면 된다.


숙제1) 여러분이 최근에 사먹은 음식의 1. 이름 2. 가격 3. 맛있는지여부를 array 자료에 담아보고 타입지정까지 해보십시오.

오늘 배운 tuple 타입으로 타입지정합시다.

쉬워서 답은 생략합니다.

(예시) [ '동서녹차', 4000, true ] 이런 자료 만들고 타입지정하라는 소리입니다.

나의 풀이

let food : [string,number,boolean ] = ['맥주',2000,true];

숙제2) 이렇게 생긴 자료는 타입지정 어떻게 해야할까요?

let arr = ['동서녹차', 4000, true, false, true, true, false, true]

몇개인지는 모르겠지만 true와 false가 셋째 자료부터 잔뜩 들어올 수 있다고 합니다.
tuple 타입과 spread 연산자를 써보도록 합시다.

나의 풀이

let arr:[string,number,...boolean[]] = ['동서녹차', 4000, true, false, true, true, false, true]

센세 풀이

type Arr = [string, number, ...boolean[]]
let arr :Arr = ['동서녹차', 4000, true, false, true, true, false, true]; 

숙제3) 함수에 타입지정을 해보도록 합시다.

function 함수(){

}
1. 이 함수의 첫째 파라미터는 문자,
2. 둘째 파라미터는 boolean,
3. 셋째 파라미터부터는 숫자 또는 문자가 들어와야합니다.
그럼 함수에 파라미터를 어떻게 만들고 타입지정은 또 어떻게 해야할까요?
오늘 배운 tuple 타입과 rest parameter를 사용해봅시다.

나의 풀이

function sss(a:string,b:boolean,c:number|string){

}

센세 풀이

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

함수('a', true, 6, 3, '1', 4)
이렇게 하면 잘 되는군요 

 

숙제4) 다음과 같은 문자/숫자 분류기 함수를 만들어보십시오.

파라미터 중 문자만 모아서 [] 에 담아주고, 숫자만 모아서 [] 에 담아주는 함수가 필요합니다.
문자 숫자 외의 자료는 입력불가능하고 파라미터 갯수 제한은 일단 없습니다.
함수 만들어보시고 함수의 파라미터/return 타입지정도 확실하게 해봅시다.

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

나의 풀이


function Ts(...A: (number | string)[]): [number[], string[]] {

   console.log("TEST");
   console.log(A);
   console.log("TEST");
   let num: number[] = [];
   let str: string[] = [];
   A.forEach((item) => {
       if (typeof item === 'number') {
           num.push(item);
       } else if (typeof item === 'string') {
           str.push(item);
       }
   });
   return [num, str];
}


Ts('b', 5, 6, 8, 'a') ;

센세 풀이

return타입은 tuple 타입으로 써보는게 어떨까요


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;  
} 
1. 함수 만들었습니다. 파라미터는 몇개가 들어올지 몰라서 rest parameter 썼고

파라미터 타입은 (string|number)[] 이게 좋겠군요.

2. 결과를 저장할 result라는 변수를 만들었습니다. 기본값은 [[], []] 이렇게 만들었고 그거 타입지정은 tuple type을 활용해봤습니다.

3. rest 파라미터에 반복문 돌렸습니다. 타입이 string이면 result[0]에 추가해주고 number면 result[1]에 추가해줍니다.

4. return 해줌 근데 타입은 알아서 지정 잘 되어있어있군요 
profile
개린이

0개의 댓글