타입 가드

2023. 1. 25. 22:26·프론트엔드/JavaScript, TypeScript

타입 가드

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

타입가드를 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'검사할 때도 유용하게 쓸 수 있다.

저작자표시 (새창열림)

'프론트엔드 > JavaScript, TypeScript' 카테고리의 다른 글

Typescript와 Duck typing  (0) 2023.12.11
조건부 타입과 맵드 타입, 유틸리티 타입  (1) 2023.03.15
?. - Optional chaining 연산자 / ?? - Null 병합 연산자  (0) 2022.08.22
Promise 일정 시간 초과시 대기 취소하고 에러 처리하기  (1) 2022.08.07
디바운스와 쓰로틀  (0) 2022.07.24
'프론트엔드/JavaScript, TypeScript' 카테고리의 다른 글
  • Typescript와 Duck typing
  • 조건부 타입과 맵드 타입, 유틸리티 타입
  • ?. - Optional chaining 연산자 / ?? - Null 병합 연산자
  • Promise 일정 시간 초과시 대기 취소하고 에러 처리하기
정현우12
정현우12
  • 정현우12
    정현우의 개발 블로그
    정현우12
  • 전체
    오늘
    어제
    • 분류 전체보기 (79)
      • 프론트엔드 (56)
        • JavaScript, TypeScript (12)
        • 스타일링 (1)
        • React (13)
        • Next.js (4)
        • 개발 환경 (9)
        • 테스트 (3)
        • 성능 최적화 (11)
        • 함수형 프로그래밍 (2)
        • 구조 (1)
      • 프로젝트 회고 (23)
        • 이미지편집기 개발 (7)
        • 엑셀 다운로드, 업로드 공통 모듈 개발 (4)
        • 사용자 매뉴얼 사이트 개발 (3)
        • 통계자동화 솔루션 개발 (1)
        • 엑셀 편집기 개발 (5)
        • API 플랫폼 (1)
        • 콜센터 솔루션 OB 캠페인 (1)
        • AI 스튜디오 (1)
      • 백엔드 (0)
  • 블로그 메뉴

    • 홈
    • 포트폴리오
    • 태그
  • 인기 글

  • 태그

    이미지 편집기
    React
    memoization
    렌더링 성능 최적화
    로딩 성능 최적화
    frontend
    웹 성능 최적화
    엑셀
    webpack
    Github Actions
    TypeScript
    useReducer
    Next.js
    회고
    엑셀 에디터
    커스텀 훅
    사용자 매뉴얼 사이트
    React-boilerplate
    JavaScript
    라이브러리 선정
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
정현우12
타입 가드
상단으로

티스토리툴바