정현우12 2023. 1. 25. 22:26

타입 가드

타입 가드는 특정 스코프 내의 타입을 보장하도록 런타임 체크를 수행하는 표현식이다. - 타입스크립트 공식문서

타입가드를 if에 조건으로 걸어서 런타임에서 코드가 실행될때 해당 if절에서 타입을 좁혀서 실행할 수 있다.

사용자 정의 타입 가드

type Ori = {
  kwak: () => void
}

type Dog = {
  wall: () => void
}

type Animal = Ori & Dog

const chundungOri: Animal = {kwak: () => console.log("꽥")}
const sabsalGae: Animal = {wall: () => console.log("삽살")}

const isDog = (animal: Animal): animal is Dog => {
  return animal.wall !== undefined
}

const doSomething = (animal: Animal): void => {
  if(isDog(animal)) {
    animal.wall()
  } else {
    animal.kwak()
  }
} 

doSomething(chundungOri) // 꽥
doSomething(sabsalGae) // 삽살

type predicate를 사용해서 파라미터가 어떤 타입인지를 판별하는 함수를 선언한다. isType형태로 보통 선언한다.

해당 함수의 리턴 타입으로 [parameter] is [type]을 줘서 [parameter][type]이면 true, 아니면 false를 리턴한다.

리턴 타입으로 boolean을 줘도 컴파일시 에러가 발생하지는 않는다. 쓰면 가독성이 좋아지므로 쓰는 것 같다.

좀더 타입 판별하는 부분을 추상화 해서 쓰는 개념으로 보면 될 것 같다.

typeof는 원시타입에만 사용가능하고 in은 가독성이 좀 떨어지므로 타입 앨리어싱한 타입을 판별하는 경우에 잘 쓸 수 있다.

in 연산자 사용

객체에서 특정 프로퍼티가 존재하는지를 검사해서 타입을 좁힌다.

// Ori, Dog 선언은 위와 동일
const doSomething = (animal: Animal): void => {
  if('wall' in animal) {
    animal.wall()
  } else {
    animal.kwak()
  }
} 

사용자 정의 타입가드에 비해서 가독성이 떨어진다.

typeof

typeof로 타입 체크를 해서 타입을 좁힌다.

const doSomething = (strOrNumber: string | number): void => {
  if(typeof strOrNumber === 'string') {
    console.log('나는 스트링')
  } else {
    console.log('나는 숫자')
  }
} 

원시 타입에만 사용할 수 있다.

instanceof

instanceof를 활용해 클래스의 인스턴스인지를 검사해서 타입을 좁힌다.

const doSomething = (animal: Ori | Dog): void => {
    if(animal instanceof Ori) {
      animal.kwak()    
    } else {
      animal.wall()    
    }
}

태그

해당 타입의 태그를 활용해서 타입을 좁힌다.

type Ori = {
  kwak: () => void
  _tag: "Ori"
}

type Dog = {
  wall: () => void
  _tag: "Dog"
}

const doSomething = (animal: Dog | Ori): void => {
  switch(animal._tag) {
      case 'Ori':
        animal.kwak()
        break
      case 'Dog':
        animal.wall()
        break
  }
} 

함수형 프로그래밍에서 쓰는 타입들은 다 _tag 프로퍼티를 달아놓는다. (판별하기 편하게) , 이렇게 태그 달려있는 친구들에 쓰기 용이하다.

등호

등호를 사용해서 파라미터 검사후 타입을 좁힌다.

const consoleNumber = (data: number | null): void => {
  if(data !== null) {
    console.log(data)
  }
}

예시 외에도 리터럴 타입 여러개를 유니언한 타입 ex) type a = '1' | '2' | '3'검사할 때도 유용하게 쓸 수 있다.