* 소개
- 타입가드는 타입스크립트 컴파일러가 더 명확하게 타입을 예측할 수 있도록 코드를 작성하는 방법 중 하나이다. 공식문서를 찾아보니 Narrowing(좁히기)와 동의어로 쓰이는 것 같아서 정리해보려한다.
- 이번 포스팅에서 다루는 타입가드의 종류는 7가지 이다.
* typeof Type Guards
* Truthiness Narrowing
* Equality Narrowing
* The in operator Narrowing
* instanceof Narrowing
* Using type predicates
* Discriminated Unions
* typeof Type Guards
- 가장 기본적으로 알고 있는 타입가드방식이다. data는 number 또는 string을 받을 수 있으나 typeof를 통해 체크함으로써 하나의 타입으로 좁혀졌다.
* Truthiness Narrowing
- 위와 같은 경우 null또한 object타입이으모 typeof만드로는 체크가 되지 않고 있다.
- 위처럼 falsy한 값을 거르도록 조건문을 설정하면 null이나 undefined를 제거할 수 있다.
* Equality Narrowing
- 위의 문제는 등호 연산자만으로도 타입의 범위를 줄여 해결할 수 있다.
- 위에서 봤던 함수를 더 간결하게 표현하였다.
- 타입스크립트 컴파일러는 아래와 같은 연산도 가능하다.
- a와 b가 같은경우는 두 파라미터의 타입이 모두 number일 경우 뿐이므로 number로 추론하고 있다.
* The in operator Narrowing
- 위에서 '===' 연산자를 활용했다면 in 연산자도 활용할 수 있다.
- Fish객체와 Bird객체는 각각 다른 메서드를 갖고 있다. 이 때, 해당 메서드(프로퍼티)가 있는지 체크하면 파라미터로 받은 객체의 클래스가 Fish인지 Bird인지 Narrowing이 가능해진다.
* instanceof Narrowing
- instanceof를 활용하여 클래스의 인스턴스임을 추론하도록 할 수도 있다.
* Using type predicates
- 이 방식은 사용자 정의 타입 가드라고 하는 기법이다.
- 커스텀 함수를 도입하여 불리언 값을 리턴하도록 한다. 함수의 정의에서 반환 타입을 통해 is와 함께 타입을 알려주도록 하였다.
- 실제 코드가 쓰이는 곳에서 코드량이 줄어들어 가독성이 올라가긴 하지만, 타입을 위해 함수를 추가한다는 점에서 이 위에서 봤던 방식으로 간단하게 처리된다면 굳이 사용하지 않아도 될 것 같다.
* Discriminated Unions
- 이 방식은 명시적인 '태그'를 붙여서 타입을 좁히는 방식이다.
- 위의 getArea함수는 원이냐 사각형이냐에 따라 넓이를 다르게 계산하여 반환해야한다.
- 위와 같은 방식으로 타입을 정의하기보다는 먼저 유의미한 타입을 만드는 것이 좋을 수 있다.
- 유의미한 타입인 Circle, Squre을 만들고 이를 이용하여 Shape라는 타입을 만들었다. 이 때, 각 타입에 명시적인 태그로써 'kind'를 주어 타입추론에서 활용하였다.
참고
해당 포스팅은 이펙티브 타입스크립트를 읽고 개인적으로 필요한 내용을 추가 및 정리한 글입니다.
링크
Documentation - Narrowing
Understand how TypeScript uses JavaScript knowledge to reduce the amount of type syntax in your projects.
www.typescriptlang.org
이펙티브 타입스크립트 - YES24
타입스크립트는 타입 정보를 지닌 자바스크립트의 상위 집합으로, 자바스크립트의 골치 아픈 문제점들을 해결해 준다. 이 책은 《이펙티브 C++》와 《이펙티브 자바》의 형식을 차용해 타입스
www.yes24.com
'Language > TypeScript' 카테고리의 다른 글
| <TS> 태그드 유니온 패턴 (0) | 2022.11.11 |
|---|---|
| <TS> 효과적으로 타입 명시하기 (0) | 2022.07.16 |
| <TS> 유틸리티 타입으로 반복 줄이기 (0) | 2022.07.02 |
