타입 좁히기(타입 가드)

타입 좁히기

1. number 또는 string

function numOrStr(a: number | string) {
   if (typeof a === 'number') {
     a.toFixed(1);
   } else {
     a.charAt(3)
   }
 }

numOrStr('123');
numOrStr(1);

• 매개변수 a가 number 또는 string이므로 이것을 if문을 사용하여 어떤 타입인지 지정해야 한다. 타입스크립트가 if문으로 number로 지정 하였으면 else까지 알아서 타입 지정을 해준다.
• 원시값일 때는 typeof를 사용한다.

2. number 또는 number[]

function numOrNumArray(a: number | number[]) {
   if (Array.isArray(a)) {
     a.concat(4);
   } else {
     a.toFixed(3);
   }
 }

numOrNumArray(123);
numOrNumArray([1,2,3]);

• 배열인지 아닌지 구별하기 위해서 Array.isArray를 사용한다.

3. class 타입

class A {
   aaa() {}
}

class B {
   bbb() {}
}

function aOrB(param: A | B) {
   if (param instanceof A) {
       param.aaa();
   }
}
aOrB(new A())
aOrB(new B())

class에서는 instanceof로 구별을 해준다.

4. 객체 속성 타입 구분

type B = {type: 'b', bbb: string};
type C = {type: 'c', ccc: string};
type D = {type: 'd', ddd: string};

function typeCheck(a: B | C | D) {
   if (a.type === 'b') {
      a.bbb;
   } else if (a.type === 'c') {
      a.ccc;
   } else {
      a.ddd;
   }
}

객체간 타입 구별하는 방법으로 if문안에 객체 속성값으로 지정해주면 그에 맞게 타입을 지정해준다.