타입 좁히기

여러 타입을 가질 수 있는 변수에 대해 조건문을 이용해 타입을 제한하는 방식을 타입 좁히기라고 한다.

아래 코드를 보면 number 타입과 string 타입을 가질 수 있는 변수 value에 대해 타입 좁히기를 진행한 모습이다.

타입 좁히기 1

 

조건문을 이용해 타입을 좁힌 후에는 각 타입에 맞는 메서드 적용이 가능하지만, 타입을 좁히기 전에는 에러를 띄우는 것을 볼 수 있다.

또한, 객체 타입에 대해서도 좁히기가 가능하다.

타입 좁히기 2

조금 까다로운 객체 타입의 타입 좁히기

하지만 일반적으로 객체 타입에서는 이런 좁히기 방식을 선호하진 않는다. 이유는 아래 사진에서 확인할 수 있다.

타입 좁히기 3

 

사진에서 보이는 바와 같이 null 타입이 포함되는 순간 typeof 연산자로 객체 타입 구분이 되지 않는다.

null 값은 초기화 값이나 값이 없을 때 자주 사용되기에 쉽게 간과하면 안된다. 따라서, 객체 타입에 대해서는 다음과 같은 좁히기 방식을 주로 사용한다.

타입 좁히기 4

 

typeof 대신 instanceof를 사용할 경우 null 타입을 제외한 객체만 구분이 가능하다.

물론, instanceof 또한 만능이 아니다. 다음과 같이 우리가 직접 타입 별칭으로 객체 타입을 지정한 경우에 대해 시도해보자.

타입 좁히기 5

 

분명히 instanceof 를 사용했는데 또 에러가 발생했다. 이는 instanceof 뒤에 오는 타입이 엄밀히 말하면 클래스이냐 타입이냐에 차이에서 발생한다.

instanceof는 value 값이 클래스의 인스턴스로 가능한지 여부를 반환하는 것이다. 그리고 JS에서의 Date 객체는 내장 클래스로 정의되어 있다.

반면에 우리가 직접 객체를 정의한 Person의 경우 클래스가 아닌 타입만을 지정한 값이다. 그렇기에 instanceof를 사용할 수 없는 것이다. 이때는, 다음과 같이 타입 좁히기를 해주어야 한다.

타입 좁히기 6

 

위 사진과 같이 in 연산자를 이용해 해당 객체 안에 age와 같은 프로퍼티가 존재하는를 따져줘야 객체 타입 판별이 가능하다.

참고자료

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런