[Typescript] User Defined Type Guards

2024. 8. 28. 20:49·Language/JavaScript
반응형

vue-core의 코드 분석 중 inject()의 구현부에서 isFunction()이라는 함수를 보게되었다. '함수여부를 어떻게 판별할까?'하고 정의를 찾아보니 아래와 같은 코드가 있었다.

export const isFunction = (val: unknown): val is Function =>
  typeof val === 'function'

내가 헷갈렸던 부분은 반환 타입으로 주어진 val is Function이었다. 파이썬에서만 봤지 타입스크립트에서 is를 사용하는걸 처음봐서 검색해보니 User Defined Type Guards라는 개념을 찾을 수 있었다.
User Defined Type Guards란 특정 조건을 만족하는지 확인하여 컴파일러에게 해당 조건이 참일 경우 변수나 객체의 타입을 안전하게 판단하고 추론할 수 있도록 도와주는 기능을 말한다.

function 함수명(변수명: 타입): 변수명 is 특정타입 {
  // 타입을 확인하는 코드
  return 조건;
}

is는 user-defined type guards에서 사용하는 키워드로 함수 반환 타입의 일부로 사용한다. 조건이 만족될 때 인자가 특정 타입임을 타입스크립트 컴파일러에게 알려줘서 조건문 내에서 타입 안전성을 보장한다.
다음은 예시 코드이다.

const isFunction = (val: unknown): val is Function => typeof val === 'function'
function test(val: unknown) {
  if (isFunction(val)) {
    // 여기서 타입스크립트 컴파일러가 val을 Function 타입으로 간주한다.
    val() 
  } else {
    // 하지만 여기에서는 val이 Function이 아니기 때문에 컴파일 시 에러가 발생한다.
    val()
  }
}

컴파일러가 보다 정확한 타입 추론을 할 수 있게해 타입 안전성을 유지하면서 가독성 높은 코드 작성을 도와주는 유용한 기능이다. 앞으로 적용할 수 있는 부분이 있으면 사용해봐야겠다.

반응형
저작자표시 비영리 변경금지 (새창열림)
'Language/JavaScript' 카테고리의 다른 글
  • [Typescript] hasText
  • [Vue] 플러그인 만들기
  • [Vue] Vue 인스턴스
  • [JS] Phaser
덴마크초코우유
덴마크초코우유
IT, 알고리즘, 프로그래밍 언어, 자료구조 등 정리
    반응형
  • 덴마크초코우유
    이것저것끄적
    덴마크초코우유
  • 전체
    오늘
    어제
    • 분류 전체보기 (124)
      • Spring Framework (10)
        • Spring (5)
        • JPA (3)
        • Spring Security (0)
      • Language (51)
        • Java (11)
        • Python (10)
        • JavaScript (5)
        • NUXT (2)
        • C C++ (15)
        • PHP (8)
      • DB (16)
        • MySQL (10)
        • Reids (3)
        • Memcached (2)
      • 개발 (3)
      • 프로젝트 (2)
      • Book (2)
      • PS (15)
        • 기타 (2)
        • 백준 (2)
        • 프로그래머스 (10)
      • 딥러닝 (8)
        • CUDA (0)
        • Pytorch (0)
        • 모델 (0)
        • 컴퓨터 비전 (4)
        • OpenCV (1)
      • 기타 (16)
        • 디자인패턴 (2)
        • UnrealEngine (8)
        • ubuntu (1)
        • node.js (1)
        • 블로그 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바
    게임 개발
    MySQL
    C
    NUXT
    memcached
    언리얼엔진4
    redis
    웹
    클래스
    딥러닝
    CPP
    map
    프로그래머스
    php
    FPS
    JS
    알고리즘
    select
    Unreal Engine
    JavaScript
    pytorch
    mscoco
    블루프린트
    PS
    Unreal
    C++
    Python
    파이썬
    게임
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
덴마크초코우유
[Typescript] User Defined Type Guards
상단으로

티스토리툴바