TypeScript 시작하기 (12) - 함수 rest 파라미터, destructuring 할 때 타입지정

---

이번 시간에는 함수의 rest parameter 와 destructuring 할 때의 타입을 지정하는 법을 알아보겠습니다.

---

1. rest parameter 에 타입 지정은 어떻게 하냐면, rest parameter 가 여러 개의 인자를 배열로 한 번에 받아올 수 있는 문법을 뜻하므로 'array' 로 타입 지정을 해주어야 합니다. 주의점 할 점은, spread syntax 와 헷갈리지 않는 것입니다.

   const practice = (...a: number[]) => {
     console.log(a);
   };
   
   practice(1, 2, 3, 4, 5, 6);

---

2. 그렇다면 rest parameter 에 문자 혹은 boolean 혹은 number 가 가능하게 하려면 코드를 어떻게 수정해야할까요? 다음과 같이 하면 됩니다.

   const practice = (...a: (number | string | boolean)[]) => {
     console.log(a);
   };
   
   practice(1, "hello", true, 4, 5, "world");

---

3. 이번에는 파라미터를 destructuring 할 때, 타입지정을 어떻게 하는지 살펴봅시다. 다음을 타입 지정을 해봅시다. 너무 길다면 type 키워드를 쓰는 것도 좋습니다.

   // 타입 지정 전
   function practice({ student, age }) {
     console.log(student, age);
   }
   
   practice({ student: true, age: 20 });

   // 타입 지정 후
   function practice({ student, age }: { student: boolean; age: number }) {
     console.log(student, age);
   }
   
   practice({ student: true, age: 20 });

---

4. 연습으로 숫자 여러 개를 입력하면 최댓값을 return 해주는 함수를 만들어봅시다.

   • 최댓값(6,3,7,2) 이렇게 쓰면 7이 return 되어야 합니다.
   • 넣을 수 있는 숫자 갯수는 제한 없고, 0 이상의 정수만 가능합니다.
   • Math.max() 는 사용 금지입니다.

   function findMax(...x: number[]): number {
     let result = 0;
     x.forEach((i) => {
       if (i > result) {
         result = i;
       }
     });
     return result;
   }
   console.log(findMax(4, 6, 3, 2));

---

5. 이번에는 아래처럼 생긴 object 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.

   • 파라미터 destructuring 문법을 사용합니다.
   • 함수 실행 시 입력한 파라미터의 value들(kim, [3,5,4] 등)을 전부 콘솔창에 출력해줍니다.

   practice({ user: "kim", comment: [3, 5, 4], admin: false });

   function practice({
     user,
     comment,
     admin,
   }: {
     user: string;
     comment: number[];
     admin: boolean;
   }): void {
     console.log(user, comment, admin);
   }
   
   practice({ user: "kim", comment: [3, 5, 4], admin: false });

---

6. 마지막으로 아래처럼 생긴 array 자료를 파라미터로 입력할 수 있는 함수를 만들어봅시다.

   practice([40, "wine", false]);

   function practice([a, b, c]: (number | string | boolean)[]) {
     console.log(a, b, c);
   }
   
   practice([40, "wine", false]);

---

지금까지 rest parameter 와 destructuring 할 때 타입을 지정하는 방법을 알아보았습니다. 다음 시간에는 Narrowing 할 수 있는 방법을 더 알아보겠습니다.