TypeScript 시작하기 (5) - 타입 확정하기 Narrowing & Assertion

---

지난 시간에는 함수에 타입을 지정하는 법과 void 타입에 대해 알아보았습니다. 오늘은 타입을 확정하는 Narrowing 과 Assertion 에 대해 알아보겠습니다.

---

1. type이 아직 하나로 확정되지 않았을 경우에는 type narrowing 을 써야합니다. 대표적인 narrowing 방법은 typeof 연산자 입니다. union type 등 떄문에 어떤 변수가 타입이 아직 불확실하면 if문 등으로 narrowing 해줘야 조작이 가능합니다.

   const plus = (x: string | number) => {
     if (typeof x === "string") {
       return x + "1";
     } else {
       return x + 1;
     }
   };

---

2. narrowing 으로 판정해주는 문법들은 현재 변수의 타입이 뭔지 특정 지을 수 있는 것이기만 하면 인정해줍니다. (typeof, in, instanceof 등등..)

---

3. 혹은 assertion 문법으로 타입을 덮어쓰면 됩니다. '나는 이 변수를 number 라고 주장하겠습니다.' 라는 뜻으로 이해하면 되며, 아래 코드에서는 array의 0번째 인덱스에 x를 대입하려고 하면 오류가 발생하지만, assertion 문법을 사용하면 해결이 됩니다.

   const plus = (x: string | number) => {
     let array: number[] = [];
     array[0] = x; // 에러 발생
   };

   const plus = (x: string | number) => {
     let array: number[] = [];
     array[0] = x as number;
   };

---

4. 그럼 assertion 은 언제 쓰느냐? narrowing 할 때 쓰는 것이고, 아래처럼 타입을 강제로 a에서 b로 바꿔주는 문법이 아닙니다.

   let nickname: string = "kim";
   nickname as number; // 에러 발생

---

5. assertion 은 무슨 타입이 들어올지 100% 확실할 때만 쓰는 것입니다. 사실은 그냥 타입실드를 임시로 해제하는 것이기 때문에 if문을 사용하는 것이 나은데, 왜냐하면 assertion 은 타입이 맞지 않아도 에러를 캐치하지 못하기 때문입니다. 그래서 남이 짠 코드를 수정하거나 왜 타입에러가 나는지 모르겠는 비상용으로만 알고 있으면 됩니다.

   const plus = (x: string | number) => {
     let array: number[] = [];
     array[0] = x as number;
   };
   
   plus("123"); // 에러 발생 x

---

6. +) 참고로 예전의 as 문법은 react 의 태그처럼 감싸서 사용했습니다.

   let nickname: string = "kim";
   <number>nickname; // 에러 발생

---

7. 연습으로, 숫자 여러개를 array 자료에 저장해놨는데 가끔 ‘4’, ‘5’ 이런 식으로 문자타입의 숫자가 발견되어 이를 클리닝해주는 함수가 필요하다고 칩시다. cleaning([’1’, 2, ‘3’]) 이렇게 숫자와 문자가 섞인 array를 입력하면 [1, 2, 3] 이렇게 숫자로 깔끔하게 변환되어 나오는 클리닝함수를 만들어봅시다.

   const cleaning = (x: (number | string)[]): number[] => {
     return x.map(Number);
   };
   
   console.log(cleaning(["1", 2, "3"])); // [1, 2, 3]

---

8. 다음과 같은 함수도 만들어봅시다. 여러 변수에 선생님이 가르치고 있는 과목이 저장되어 있습니다. ‘chulsu’ 같은 object 자료를 파라미터로 집어넣으면 그 선생님이 가르치고 있는 과목중 맨 뒤의 1개를 return 해주는 함수를 만들어봅시다.

   let chulsu = { subject: "math" };
   let jisu = { subject: ["science", "english"] };
   let minsu = { subject: ["science", "art", "korean"] };

   const title = (x: { subject: string | string[] }) => {
     if (typeof x.subject === "string") {
       return x.subject;
     } else if (Array.isArray(x.subject)) {
       return x.subject[x.subject.length - 1];
     }
   };
   
   console.log(title({ subject: ["englist", "art"] })); // art

---

지금까지 Narrowing 과 Assertion 에 대해 알아보았습니다. 다음 시간에는 타입도 변수에 담아 쓰는 방법을 알아보겠습니다.