TypeScript 시작하기 (21)

---

이번 시간에는 array 자료에 붙일 수 있는 tuple type 에 대해서 알아보도록 하겠습니다.

---

1. tuple type 이라는 것을 쓰면 위치까지 고려한 엄격한 타입지정이 가능합니다.

   let dog: (string | boolean)[] = ["dog", true]; // tuple type X
   let dog: [string, boolean] = ["dog", true]; // tuple typx O

---

2. tuple 안에는 옵션 표시가 가능하나, 중간에 옵션을 넣으면 순서 개념이 깨져서 불가능합니다.

   let dog: [string, boolean?, number] = ["dog", true]; // 필수 요소는 선택적 요소 뒤에 올 수 없습니다.ts(1257)

---

3. 함수에서 rest parameter 를 쓸 때도 tuple type 사용이 가능합니다.

   function practice(...x: [number, string]) {
     console.log(x);
   }
   practice(1, "hello");

---

4. spread operator 를 사용할 때도 타입지정이 가능합니다.

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

---

5. 이번에는 최근에 사먹은 음식의 이름, 가격, 맛있는지 여부를 array 자료에 담아보고 타입지정까지 해봅시다.

   let arr: [string, number, boolean] = ["오예스", 4000, true];

---

6. 다음으로는 아래처럼 생긴 자료를 타입지정해 봅시다.

   let arr = ["오예스", 4000, true, false, true, true, false, true];

   let arr: [string, number, ...boolean[]] = [
     "오예스",
     4000,
     true,
     false,
     true,
     true,
     false,
     true,
   ];

---

7. 다음으로 함수에 타입지정을 해봅시다. 조건은 다음과 같습니다.

• 함수의 첫째 파라미터는 문자

• 둘째 파라미터는 boolean

• 셋째 파라미터부터는 숫자 또는 문자

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

---

8. 마지막으로, 다음과 같은 문자/숫자 분류기 함수를 만들어봅시다.

• 파라미터 중 문자만 모아서 [ ] 에 담아주고, 숫자만 모아서 [ ] 에 담아준다.

• 문자 숫자 외의 자료는 입력 불가능하고, 파라미터 갯수 제한은 없다.

  function practice(...rest: (string | number)[]) {
    let result: [string[], number[]] = [[], []];
  
    rest.forEach((item) => {
      if (typeof item === "string") {
        result[0].push(item);
      } else {
        result[1].push(item);
      }
    });
  
    return result;
  }

---

지금까지 array 자료에 붙일 수 있는 tuple type 에 대해서 알아보았습니다. 다음 시간에는 외부 파일 이용시의 declare 와 이상한 ambient module 에 대해서 알아보도록 하겠습니다.

(본 포스팅은 코딩애플(Coding Apple)의 '빠르게 마스터하는 타입스크립트' 강의 내용을 바탕으로 학습하며 정리한 글입니다.)