이정환 님의 한 입 크기로 잘라먹는 타입스크립트 를 수강한 내용 입니다.
타입 좁히기
조건문 등을 이용해 넓은 타입에서 ➡️ 좁은 타입으로 타입을 상황에 맞게 좁히는 방법을 알아보겠습니다.
다음과 같은 함수가 있다고 가정하겠습니다.
value의 타입이 number | string 이므로 함수 내부에서 다음과 같이
value가 number 타입이거나 string 타입일 것으로
기대하고 메서드를 사용하려고 하면 오류가 발생합니다.
value가 number 타입이다라고 기대하고 toFixed 메서드를 사용하고 싶다면
다음과 같이 조건문을 이용해 value의 타입이 number 타입임을 보장해줘야 합니다.
반대로 toUpperCase 메서드를 사용하고 싶으면 string 타입을 보장해줘야 합니다.
조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장하면 해당 조건문 내부에서는 변수의 타입이 보장된 타입으로 좁혀집니다.
if (typeof === …) 처럼 조건문과 함께 사용해 타입을 좁히는 이런 표현들을 타입 가드 라고 부릅니다.
타입 좁히기를 잘 활용하면
매개변수에 다양한 타입의 값들이 들어올 수 있고, 함수 내부에서 값의 타입에 따라 다른 동작을 하는 범용적인 함수를 만들게 되는데 타입 좁히기라는 기능과 타입 가드에 대해 알아두면 좋습니다.
그 외 다른 타입 가드들
1. instanceof 타입가드
instanceof를 이용하면 내장 클래스 타입을 보장 할 수 있는 타입 가드를 만들 수 있습니다.
먼저 아래 코드를 살펴보겠습니다.
두 함수의 차이는 타입에 null 이 포함되어있나 차이 입니다. 하지만 하나는 동작하고 다른 하나는 오류가 발생합니다.
먼저 Date 객체는 객체 타입이니까 typeof === 'object' 로 타입 가드를 했습니다.
하지만 위와 같이 사용하는 것은 별로 좋은 방법은 아닙니다.
- 두 번째 함수처럼 null 값도 들어올 수 있다고 가정하면 바로 오류가 발생 합니다.
자바스크립트의 typeof 는 null 값에다가 typeof 를 걸어도 object 를 반환 합니다.
그렇기에 조건문을 통과하는 값이 Date 뿐만 아니라 null 도 포함 됩니다.
즉, 중괄호 내부에서 Date 객체라고 보장 할 수 없습니다.
이런 경우 instanceof 를 사용 할 수 있습니다.
⚠️ instanceof 주의
Instanceof는 내장 클래스 또는 직접 만든 클래스에만 사용이 가능한 연산입니다.
- 따라서 직접 만든 타입과 함께 사용할 수 없습니다.
2. in 타입가드
직접 만든 타입과 함께 사용하려면 in 를 사용하면 됩니다.
중간에 value && "age" 라고 작성하는 이유는
"age" in value만 작성하면null일 수 있다고 오류가 나옵니다.in 연산자 뒤에는
null이나undefined값이 들어오면 안됩니다.그래서 value 가 null이 아니다를 알려주기 위해 value 가 있는 경우에만 검사하도록 한 것 입니다.