유니온과 리터럴 타입

둘 중 하나만 담기게 합니다

값이 언제나 한 가지는 아닙니다. 아이디가 글자일 때도 숫자일 때도 있습니다. 세로줄로 이어 적으면 그중 하나가 담길 수 있다는 뜻이 됩니다.

let id: string | number;

이것을 유니온이라고 합니다. 몇 개를 이어도 됩니다.

let id: string | number;

id = "a-1";
console.log(id);

id = 1;
console.log(id);

let id: string | number;

id = true;

정해진 값만 담기게 하기 — 리터럴 타입

1.2 에서 const 의 타입이 그 값 하나로 좁혀지는 것을 보았습니다. 값을 그대로 타입으로 적을 수 있습니다. 그것을 유니온으로 이으면 정해진 몇 가지만 담기게 됩니다.

type Level = "low" | "mid" | "high";

let level: Level = "mid";
console.log(level);

level = "middle";

오타가 그대로 잡힙니다. JavaScript 였다면 "middle" 이 그냥 담기고, 그 값으로 갈라지는 코드가 조용히 어긋났을 것입니다.

type Level = … 이 타입에 이름을 붙이는 문법입니다. 2.4 에서 자세히 봅니다.

유니온에서는 공통된 것만 사용할 수 있습니다

function show(id: string | number) {
	console.log(id.toUpperCase());
}

show("a-1");

show("a-1") 로만 불렀는데도 막혔습니다. 타입 검사는 부르는 자리를 보지 않고 함수만 봅니다. 숫자가 들어올 수 있다고 적어 두었으니, 숫자일 때도 되는 코드여야 합니다.

그래서 유니온을 받으면 어느 쪽인지 확인해서 좁혀야 합니다. 그 방법이 2.5 타입 좁히기입니다. 아래에 미리 한 가지만 봅니다.

function show(id: string | number) {
	if (typeof id === "string") console.log(id.toUpperCase());
	else console.log(id + 1);
}

show("a-1");
show(1);

처음에 자주 걸리는 것

직접 해보기

type Status = "pending" | "done";

let status: Status = "pending";
console.log(status);

status = "done";
console.log(status);

function size(value: string | unknown[]): number {
	return value.length;
}

console.log(size("홍길동"));
console.log(size([1, 2, 3, 4]));

이 단원의 정리