본문 바로가기

언어/TypeScript

타입 가드란?

반응형

타입 가드(Type Guard)를 사용하면 조건문에서 객체의 타입을 좁혀나갈 수 있다.

 

typeof

TypeScript는 JavaScript의 instanceof, typeof 연산자를 이해할 수 있다.

즉 조건문에 typeof와 instanceof를 사용하면 TypeScript는 해당 조건문 블록 내에서 해당 변수의 타입이 다르다는 것을 이해한다.

아래 예시를 보면 특정 메소드가 string에 존재하지 않는 다는 사실을 인식해 사용자 오타가 있을 수 있음을 지적한다.

 

function doSomethingx(x: number | string) {
    if (typeof x === 'string') {  // 이 조건문 안에 있는 x는 무조건 string이다.
      console.log(x.subtr(1)); // 에러 감지
      console.log(x.substr(1)); // 정상 동작
    }
    x.substr(1); // Error: 'x'가 string이라는 보장이 없다.
  }

 

Class 를 쓰는 경우에는 instanceof 를 사용하면 된다.

class Foo {
  foo = 123;
  common = '123';
}

class Bar {
  bar = 123;
  common = '123';
}

function doStuff(arg: Foo | Bar) {
  if (arg instanceof Foo) {
    console.log(arg.foo); // ㅇㅋ
    console.log(arg.bar); // Error!
  }
  if (arg instanceof Bar) {
    console.log(arg.foo); // Error!
    console.log(arg.bar); // ㅇㅋ
  }

  console.log(arg.common); // ㅇㅋ
  console.log(arg.foo); // Error!
  console.log(arg.bar); // Error!
}

doStuff(new Foo());
doStuff(new Bar());

 

in으로 이럴 때 사용도 가능하다.

 

interface A {
  x: number;
}
interface B {
  y: string;
}

function doStuff(q: A | B) {
  if ('x' in q) {
  // q: A
  }
  else {
  // q: B
  }
}

 

 

반응형

'언어 > TypeScript' 카테고리의 다른 글

맵의 일부만 구현하고 싶을 때: TypeScript Partial  (0) 2023.08.21
타입 표명이란?  (0) 2023.08.07