TypeScript 시작하기 (8) - 함수와 methods에 type alias 지정하는 법

지난 시간에는 Literal Types 에 대해 알아보았습니다. 오늘은 함수와 methods에 type alias 를 지정하는 방법을 알아보겠습니다.

1. 함수를 만들 때 type alias 로 만들고 싶으면 arrow function 으로만 만들어주어야 합니다.

   type Practice = (x: string) => number;

2. 또한, 함수선언식이 아닌 함수표현식에만 type alias 가 가능합니다. (function 키워드를 사용하는 것이 함수선언식)

   type Practice = (x: string) => number;
   
   const test: Practice = (x) => 10; // 함수표현식

3. object 안의 함수 타입 지정은 어떻게 할까요? 다음 자료에 대한 타입을 지정해봅시다.

   let data = {
     name: "kim",
     age: 30,
     plusOne(x) {
       return x + 1;
     },
     changeName: () => {
       console.log("안녕");
     },
   };

   a. plusOne 이라는 속성은 함수여야 하고, 숫자를 넣어서 숫자를 뱉는 함수여야 합니다.
   b. changeName 이라는 속성은 함수여야 하고, 아무것도 return 하면 안됩니다.

   type Person = {
     name: string;
     age: number;
     plusOne: (x: number) => number;
     changeName: () => void;
   };

4. 다음 함수 2개를 만들어보고 타입도 정의해봅시다.
   a. cutZero() 라는 함수를 만듭니다. 이 함수는 문자를 하나 입력하면 맨 앞에 ‘0’ 문자가 있으면 제거하고 문자 타입으로 return 해줍니다.
   b. removeDash() 라는 함수를 만듭니다. 이 함수는 문자를 하나 입력하면 대시기호 ‘-’ 가 있으면 전부 제거해주고 그걸 숫자 타입으로 return 해줍니다.

   type Cut = (x: string) => string;
   type Remove = (x: string) => number;
   
   const cutZero: Cut = (x: string) => {
     let result = x.replace(/^0+/, "");
     return result;
   };
   
   const removeDash: Remove = (x: string) => {
     let result = x.replace(/-/g, "");
     return parseInt(result);
   };

5. 함수에 함수를 집어넣고 싶을 땐 어떻게 해야할까요? 4번에서 만든 함수들을 파라미터로 넣을 수 있는 함수를 제작해봅시다. 이 함수는 파라미터 3개가 들어가는데 첫째는 문자, 둘째는 함수, 셋째는 함수를 집어넣을 수 있습니다. 함수를 실행하면,
   a. 첫째 파라미터를 둘째 파라미터 (함수) 에 파라미터로 집어넣습니다.
   b. 둘째 파라미터 (함수) 에서 return 된 결과를 셋째 파라미터 (함수)에 집어넣습니다.
   c. 셋째 파라미터 (함수) 에서 return 된 결과를 콘솔창에 출력해줍니다.

   type Cut = (x: string) => string;
   type Remove = (x: string) => number;
   
   const cutZero: Cut = (x: string) => {
     let result = x.replace(/^0+/, "");
     return result;
   };
   
   const removeDash: Remove = (x: string) => {
     let result = x.replace(/-/g, "");
     return parseInt(result);
   };
   
   const practice = (x: string, test1: Cut, test2: Remove) => {
     let result1 = test1(x);
     let result2 = test2(result1);
     console.log(result2);
   };
   
   practice("010-1234-5678", cutZero, removeDash);

지금까지 함수와 methods 에 type alias 를 저장하는 법을 알아보았습니다. 다음 시간에는 타입스크립트로 html 변경과 조작할 때 주의점에 대해 알아보겠습니다.