[고급타입] 타입가드(Type-Gurad)

트릴로니·2022년 9월 2일
0

타입스크립트

목록 보기
6/9

타입가드란?

  • 런타임 동안 타입을 정확하게 확인하고 싶을 때 쓴다.
  • Combinable은 유니언 타입으로 매개변수 a, b은 string일 수도 number일 수도 있다.
type Combinable = string | number;

function add(a: Combinable, b: Combinable){
  if(typeof a ==='string' || typeof b === 'string'){
    return a.toString() + b.toString();
  }
  return a+b;
}
  • 조건문과 'typeof'로 타입가드를 선언해주면 런타임 중에 타입을 구분할 수 있다.
  • 타입 가드를 써서 유니언 타입으로 코드를 유연하게 작정할 수 있으며 동시에 런타임 동안 코드를 정확하게 수행하도록 보장할 수 있다.

객체 프로퍼티와 타입가드

type Admin {
  name: string;
  priviledges: string[];
};

type Employee = {
  name: string;
  startDate: Date;
}

type UnknownEmployee = Employee | Admin;

function printEmployeeInformation(emp: UnknownEmployee) {
  console.log('Name: ' + emp.name);
  if('priviledges' in emp){
    console.log('Priviledges ' + emp.priviledges);
  }
  if('startDate' in emp){
    console.log('Priviledges ' + emp.startDate);
  }
}
  • UnknownEmployee은 Admin 타입일수도 있고 Employee타입일수도 있다. 즉 name 프로퍼티는 두 타입 모두 공통적으로 있지만 priviledges프로퍼티는 Admin에 startDate는 Employee에만 선언되어있다.
  • 조건문과 '프로퍼티 in 객체'를 쓰면 해당 객체에 프로퍼티가 있는지 확인할 수 있다.

클래스와 타입가드

class Car{
  drive(){
    console.log('Driving...')
  }
}

class Truck{
  drive(){
    console.log('Driving a truck...')
  }
  loadCargo(amount: number){
    console.log('Loading cargo...' + amount)
  }
}

type Vehicle = Car | Truck;

const v1 = new Car();
const v2 = new Truck();

function useVehicle(vehicle: Vehicle){
  vehicle.drive();
  if(vehicle instanceof Truck){
    vehicle.loadCargo(1000);
  }
}
  • drive()메소드는 두 class모두 가지고 있지만 loadCargo()의 경우 Truck class에만 선언되어 있다.
  • useVehivle에 인자로 들어온 vehicle이 어떤 클래스의 인스턴스인지 확인하려면 조건문과 '인스턴스 instanceof 클래스'를 사용할 수 있다.

0개의 댓글