[Typescript] 유니언과 리터럴(1)

유니언이란?

유니언(union) : 값에 허용된 타입을 두개 이상의 가능한 타입으로 확장하는 것

 

변수의 자료형 타입을 "이거" 또는 "저거" 라고 정의해주는 역할을 한다.

let mathmatician = Math.random() > 0.5 ? undefined : "Mark Goldberg";

 mathmatician은 undefined거나 string일 수 있다. 어떠한 타입인지 정확히 모르지만 두 옵션중 하나라는 것을 알고 있는 경우에 코드를 처리하는 개념이다.

🚩유니언 타입 선언

let thinker : string | null = null;

변수에 대해 초기값이 존재해도 명시적 타입 에너테이션을 제공하는 것이 유용할 때 유니언 타입을 사용한다.

예를 들면 어떤 변수가 null로 유지되다 입력이 들어왔을 때 string으로 받아서 사용하는 경우가 될 수 있다.

 

note : 유니언 타입 선언 순서는 중요하지 않다.

let thinker : string | null = null;
let thinker : null | string = null; //두 코드는 똑같음

 

🚩유니언 타입 속성

값이 유니언 타입일때는, typescript는 유니언으로 선언된 모든 타입에 대해서 존재하는 멤버속성에만 접근할 수 있다.

예를 들면, 이러하다.

선언된 하나의 타입에만 존재하는 멤버속성이 아닌 모든 타입에 대해  존재하는 멤버속성이 있어야만 한다.

let physicist = Math.random() > 0.5
? "Marie" : 84

physicist.toString(); /*OK*/

physicist.toUpperCase();
//Error : Property 'toUpperCase' does not exist on type 'string | number'.
//	Property 'toUpperCase' does not exist on type 'number'.

 

모든 유니언 타입에 존재하지 않는 속성에 대한 접근을 제한하는 것은 안전조치이다. 

왜냐면 TS는 해당속성을 사용하는것이 안전하지 않다고 여기고 실제로 그런 속성이 없을 수도 있기 때문이다.

 

그럼 타입의 범위를 늘렸으니 다시 좁혀서 구체적인 타입으로 취급하는 기능도 있을까? 

그것이 바로 내로잉!

🚩내로잉

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

유니언으로 타입의 범위를 늘렸다면, 내로잉으로 더 구체적인 타입으로 만드는것이다.

그 논리적 검사 방법을 타입가드라고 한다.

 

내로잉에는 4가지의 방법이 있는데....

1. 값 할당을 통한 내로잉
2. 조건 검사를 통한 내로잉
3. typeof 검사를 통한 내로잉
4. 참 검사를 통한 내로잉

1️⃣ 값 할당을 통한 내로잉

let admiral : number | string;
admiral = "Grace Hopper;
admiral.toUpperCase();
admiral.toFixed();

//Error : Property 'toFixed' does not exist on type 'string'.

변수에 유니언 타입 에너테이션이 명시되고 초기값이 주어지면 값 할당 내로잉이 작동한다.

 

2️⃣ 조건 검사를 통한 내로잉

let scientist = Math.random() > 0.5
? "Rosalind Franklin"
: 51;

if (scientist === "Rosalind Franklin"){
	/*scientist : string 의 타입*/
    scientist.toUpperCase(); /*OK-> 내로잉됨*/
}

scientist.toUpperCase();


//
// Error : Property 'toUpperCase' does not exist on type 'string' | 'number',
// Property 'toUpperCase' does not exist on type 'number'.

if 문을 통한 변수의 타입을 줄이는 방법

 

3️⃣ typeof 검사를 통한 내로잉

타입스크립트는 직접 값을 확인해 타입을 좁히기도 하지만, typeof 연산자를 사용할 수도 있다.

let research = Math.random() > 0.5 ? "Hi" : 51;
if (typeof research === "string") {
	research.toUpperCase(); /*OK. string 타입으로 취급된다.*/
} else {
	research.toFixed(); /*OK. number 타입으로 취급된다.*/
}

typeof 검사는 타입을 좁히기 위해 자주 사용되는 방법이다!

 

4️⃣ 참(Boolean) 검사를 통한 내로잉

JS에서 falsy로 정의된 값 → false, 0, -0 , 0n, "", null, undefined, NaN

을 제외하고의 모든  값은 참(truthy)이다.

Typescript 는 잠재적인 값 중  truthy 로 확인된 일부에 한해서만 변수의 타입을 좁힐 수 있다.

let lol = Math.random() > 0.5 ? "대상혁" : undefined;
if(lol) {
	lol.toUpperCase(); /*OK*/
}

lol.toUpperCase(); /* Error */

방금 전 위의 코드는 let lol = ~~~ 이렇게 변수 유니언타입 선언과 함께 초기화해준 모습이다.

만약 초기값이 없는 변수라면 어떻게 처리해야할까?

 

JS에서 초기값이 없는 변수는 기본적으로 undefined로 할당된다.

만약 그럼 유니언을 undefined를 포함하지 않는 타입으로 변수를 선언하고 값을 할당하기 전에 사용하려고 시도하면 어떻게 될까?

★Typescript는 값이 undefined이 아닐때까지 기다린다.

 

let say : string;

say?.length;

/*Error: Variable 'say' is used before being assigned.*/

say= "Hello";
say.length; /*OK*/

+ 변수 타입에 undefined가 포함되어 있는 경우에는 오류가 보고되지 않는다.