유니언과 리터럴

* 조시 골드버그의 러닝 타입스크립트라는 책을 읽고 정리하면서 코드를 작성해본 내용입니다.

 

유니언 타입(Union Type)

유니언 타입이란 값에 허용된 타입을 두 개 이상으로 확장하는 타입을 말한다.

num이라는 변수는 조건에 따라 number type일 수도 있고 undefined type 일 수도 있다.

이럴 때 타입스크립트는 가능한 타입 사이에 | 연산자를 사용하여 유니언 타입을 나타낸다.

 

개발자가 한 변수에 여러개의 타입을 사용하고자 하는 경우 타입 애너테이션을 사용하여 명시적으로 유니언 타입을 표기할 수 있다.

유니언 타입 선언은 타입 애너테이션으로 타입을 정의하는 모든 곳에서 사용 가능하다.

타입의 순서는 중요하지 않다. number | undefined  와  undefined | number  는 똑같이 동작한다.

 

유니언 타입의 변수의 프로퍼티에 접근하거나 메서드를 사용하려고 하는 경우 모든 가능한 타입에 있는 프로퍼티나 메서드만 사용 가능하다.

위의 예시에서 number | string 타입을 가지는 num이라는 변수에서 toString 메서드는 number 타입과 string 타입에 모두 존재하기 때문에 사용이 가능하다.

하지만 toUpperCase 메서드는 number 타입에는 존재하지 않기 때문에 바로 사용하는 것은 불가능하다. 

 

유니언 타입의 변수 num에서 특정 타입의 프로퍼티에 접근하거나 메서드를 사용하려면 코드에서 값이 보다 구체적인 타입 중 하나라는 것을 타입스크립트에 알려야 하는데, 이러한 과정을 내로잉(Narrowing) 이라고 한다.

 

 

내로잉(Narrowing)

내로잉은 값이 정의, 선언, 혹은 이전에 유추된 것보다 더 구체적인 타입임을 코드에서 유추하는 것이다.

타입을 좁히는 데 사용할 수 있는 논리적 검사를 타입 가드(Type Guard)라고 한다.

 

값 할당을 통한 내로잉

변수의 값을 직접 할당하면 타입스크립트가 변수의 타입을 할당된 값으로 좁힌다.

number | string 타입인 union 변수에 string type을 할당하면 toUpperCase 메서드를 사용할 수 있지만, number type을 할당하면 사용할 수 없다.

 

조건 검사를 통한 내로잉

조건문으로 특정 값인지 직접적으로 확인하면 특정 값의 타입이 사용할 수 있는 프로퍼티나 메서드를 사용할 수 있다.

위 코드에서 조건문 안에서는 toUpperCase 메서드를 사용할 수 있지만, 조건문 밖에서는 사용할 수 없다.

 

typeof 연산자를 사용하여 타입을 확인할 수도 있다.

타입이 string 일 때는 toUpperCase를 사용할 수 있고,

타입이 string 이 아닐때, 즉 number 타입일 때는 toFixed 메서드를 사용할 수 있다.

 

삼항 연산자도 사용 가능하다.

 

 

리터럴 타입

리터럴 타입은 원시타입 7가지보다 더 구체적인 타입이다. const 키워드로 변수를 선언해서 초기값을 할당하는 경우 그 변수는 이후의 코드에서 변경이 불가능하기 때문에 초기값을 타입으로 가진다.

즉, 원시 타입중 어떤것이 아니라 특정 원시값을 타입으로 가지게 되는데 이것을 리터럴 타입이라고 한다.

let 키워드로 선언한 lastname 변수의 경우 이후 코드에서 변경이 될 수 있기 때문에 타입이 string이지만,

const 키워드로 선언한 firstname 키워드의 경우 이후게 변경이 불가능하기 때문에 타입이 "Kim"이라는 특정한 값으로 고정된다.

 

리터럴 타입을 타입 애너테이션으로 사용하면 특정 변수의 값의 범위를 줄일수 있다.(일종의 narrowing)

이 코드에서 firstName 변수에는 'Kim' 이나 'Lee' 만 할당할 수 있다.

 

 

엄격한 null 검사

십억달러 짜리 실수

null 개념을 개발한 토니 호어라는 사람이 말하길 자신이 개발한 null 참조는 십억달러짜리 실수였다고 한다.

많은 다른 언어에서 다른 타입이 필요한 위치에 null을 할당가능하도록 허용한다. 그러나 이러한 null 할당으로 인해 수많은 오류와 취약성 및 시스템 충돌이 발생하기도 한다.

 

타입스크립트에서는 strictNullChecks라는 옵션을 통해 엄격한 null 검사를 활성화 할 수 있다. 이 경우 다른 타입의 값에 null을 할당할 수 없다. 

 

null값 할당이 필요하다면 유니언 타입을 활용하면 된다.

 

십억달러짜리 실수를 방지하기 위해 엄격한 null 검사를 활성화 하는 것을 권장한다.(기본적으로 활성화 되어있다.)

 

참 검사를 통한 내로잉

truthy값인지 falsy 값인지를 판단하여 내로잉해서 null이나 undefined를 걸러낼 수도 있다. 그러나 falsy값에 null과 undefined만 있는것이 아니고 0, 빈문자열, NaN등 다른 falsy값은 걸러낼 수 없다는 단점이 있다.

위 코드에서 처럼 truthy값은 항상 string 타입이기 때문에 string 메서드가 사용가능하지만, 

else 문에 들어오는 falsy값에는 undefined와 빈문자열이 있기 때문에 제대로 undefined 타입만 걸러내지 못했다.

 

초기값이 없는 변수

초기값을 지정해주지 않으면 undefined가 할당된다. 타입스크립트는 값이 할당되기 이전의 변수도 확인이 가능하다.

 

변수 타입에 undefined가 포함되는 경우 같은 코드여도 오류가 발생하지 않는다.

 

타입 별칭

타입스크립트에는 재사용하는 타입에 더 쉬운 이름을 할당하는 타입 별칭(type alias)이 있다.

편의상 타입 별칭은 파스칼 케이스로 작성한다.

 

타입 별칭은 타입 시스템에만 존재하므로 자바스크립트로 컴파일될 때 없어진다.

 

타입 별칭은 다른 타입 별칭을 참조할 수 있다.

 

사용할 타입 별칭을 선언하고 참조할 타입 별칭은 나중에 선언해도 된다.

 

 

 

Reference

- 조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023