타입 가드 ( Type Guard )

Eunji Park·2022년 7월 26일
0

TypeScript

목록 보기
5/18
post-thumbnail
post-custom-banner

✓ typeof

typeof 연산자는 JavaScript에서 이미 존재하는 타입 검사 연산자로,

피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다.

function print(value: number | string): string {
  if (typeof value === 'number') {
    return value  // --> Error: number 자체를 리턴하지 않기 때문
  }

  if (typeof value === 'string') {
    return value
  }

  return value
}


// 타입을 좁혀줄 필요가 있다.
function print(value: number | string): string {
  if (typeof value === 'number') {
    return String(value)
  }

  if (typeof value === 'string') {
    return value
  }

  return value
}

✓ in

in 연산자는 JavaScript에 이미 존재하는 연산자로,

명시된 속성이 명시된 객체 안에 존재하는지의 결과를 불리언( boolean )으로 반환한다.

interface Dog {
  name: string
  bark(): '멍멍'
}


interface Cat {
  name: string
  meow(): '냐옹'
}


function sayAnimal(animal: Dog | Cat) {  // union 타입 (or 과 비슷)
  if ('bark' in animal) {  // bark가 animal에 있는지 판별
    animal.bark()
    animal.name
  }

  if ('meow' in animal) {  // meow가 animal에 있는지 판별
    animal.meow()
  }
}

✓ instanceof

instanceof 연산자도 JavaScript에 이미 존재한다.

instanceof 는 생성자의 prototype 속성이 객체의 프로토타입 체인 어딘가에 존재하는지 판별하는 연산자이다.

프로토타입 체인

// 생성자 함수 (like 클래스)
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

// 인스턴스
const auto = new Car("Honda", "Accord", 1998);


// auto ➜ Car ➜ Object
// 프로토타입 체인을 거슬러 올라가기 때문에 다음과 같은 결과가 나온다.

console.log(auto instanceof Car);  // true (auto는 Car를 바라보고 있음)

console.log(auto instanceof Object);  // ture (auto는 최종적으로 Object를 바라보고 있음)

instanceof

function getDate(date: Date | string): Date {
  if (date instanceof Date) {
    return date
  }

  return new Date(date)
}

✓ 사용자 정의

사용자 정의 타입 가드는 다음과 같은 형식으로 작성한다.
매개변수 is 타입

사용자가 정의한 타입 가드를 사용하면 재활용할 수 있다는 장점이 있다.

Example 1

function isDate(date: Date | string): date is Date {
  return date instanceof Date
}

function getDate(date: Date | string): Date {
  if (isDate(date)) {  // date instanceof Date 검사와 동일
    return date
  }

  return new Date(date)
}

Example 2

interface Dog {
  name: string
  bark(): '멍멍'
}

interface Cat {
  name: string
  meow(): '냐옹'
}


function isDog(animal: Dog | Cat): animal is Dog {
  return 'bark' in animal
}

function isCat(animal: Dog | Cat): animal is Cat {
  return 'meow' in animal
}


function sayAnimal(animal: Dog | Cat) {
  if (isDog(animal)) {  // 'bark' in animal 검사와 동일
    animal.bark() 
  }

  if (isCat(animal)) {  // 'meow' in animal 검사와 동일
    animal.meow()
  }
}
post-custom-banner

0개의 댓글