[TypeScript] Type Guard

dev.galim·2023년 9월 14일
0

TypeScript

목록 보기
10/10

Type Guard

→ 데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러개일때, 조건문을 통해 데이터의 타입을 좁혀나가는 것.

  • 데이터의 타입에 따라 대응해 에러를 최소화 할 수 있음. 타입을 통해 가드하는 코드, 방어적인 코드를 짤 수 있음.

타입 가드를 통해 유니온 타입 사용해보기

→ elice가 Human인지, Dog인지 확신할 수 없는 상태.

구별된 유니온 → 타입스크립트가 타입을 추론할 수 있도록 단서를 주는 것.

  • 타입을 구별할 수 있는 단서가 있는 유니온 타입
  • 구별된 유니온, 태그(타입을 구별할 수 있는 단서)된 유니온, 서로소 유니온이라 부르기도 함.

구별된 유니온으로 타입 가드하는 방법

  1. 각 타입에 타입을 구별할 단서(태그)를 만든다.
  2. 조건문을 통해 각 타입의 단서로 어떤 타입인지 추론한다.
  3. 해당 타입의 프로퍼티를 사용한다.

실무에서 자주 쓰는 구별된 유니온과 타입 가드

  • 서버에서 오는 응답 또는 함수의 결과가 여러 갈래로 나뉠 때, 구별된 유니온 사용 가능.
  • 타입의 단서를 토대로 타입 가드를 하고, 응답의 결과에 따라 다른 작업을 실행시켜준다.

다양한 연산자를 통한 타입 가드

instanceof

→ 객체가 어떤 클래스의 객체인지 구별할 때 사용하는 연산자.

인스턴스 instanceof 클래스와 같이 사용함.**

typeof

→ 데이터의 타입을 반환하는 연산자.

typeof 데이터 === ‘string’ 형식으로 사용.**

  • typeof 데이터 === ‘undefined’ 처럼 undefined도 체크 가능.
  • 데이터 == ‘null’과 같이 쓰면 null, undefined 둘 다 체크 가능.
    • but, null과 undefined는 따로 체크해주는 것이 더 명확함.

in

문자열 A in 오브젝트 → 오브젝트의 key 중 문자열 A가 존재하는가.**

  • 문자열 A - key를 의미함.

literal type guard

→ 특정 타입의 하위 타입, 구체적인 타입을 의미함.

  • 예시) 1, “1”, true 처럼 주체적인 타입.
  • 리터럴 타입은 동등(==), 일치(===) 연산자 또는 switch로 타입 가드가 가능함.

💡 예제처럼 하나의 value값에 따라 조건문을 작성하는 경우, 대부분 switch문의 연산 결과가 if-else문보다 빠르므로 switch문을 사용하는걸 권장한다!

사용자 정의 함수

→ 사용자 정의 함수를 사용해 타입 가드 가능.

오픈소스 sindresorhus/is를 사용하여 가독성있게 타입 체크가 가능함.

Yarn add @sindresorhus/is

npm install @sindresorhus/is

https://github.com/sindresorhus/is

profile
열심히 해볼게요

0개의 댓글