[TypeScript] 리터럴, 유니언, 교차 타입

해리포터·2023년 1월 11일

리터럴 타입 (Literal Type)

자바스크립트에서 let과 const 키워드를 사용해서 변수를 선언할 수 있다.

const 는 변하지 않는 값을 선언할 때 사용하고,

let은 변할 수 있는 값을 선언할 때 사용한다.

const userName1 = "Bob";
let userName2 = "Tom";

타입스크립트에서 위와 같이 작성하고 마우스를 올려보면

const로 선언한 userName1은 “Bob”,
let으로 선언한 userName2는 string 타입이라고 알려준다.

userName1은 string 이지만, const로 선언된 변수이기 때문에 변할 수 없어 “Bob” 이외의 값은 가질 수 없다.

반면, let으로 선언된 변수 userName2는 현재 “Tom” 이지만 언제든 다른 값으로 변할 수 있으니 보다 넓은 개념의 string 타입으로 정의된다.

userName을 3으로 바꾸면 에러가 발생한다.

만약 3도 넣을 수 있게 만들어주려면, 명시적으로 아래와 같이 작성해야 한다.

const userName1 = "Bob";
let userName2: string | number = "Tom";

userName2 = 3;

userName1 처럼, 정해진 string 값을 가진 것을 문자열 리터럴 타입이라고 한다.

문자열 리터럴 타입 예시

const userName1 = "Bob";
let userName2: string | number = "Tom";

type Job = "police" | "developer" | "teacher";

interface User {
	name: string;
	job: Job;
}

const user: User = {
	name: "Bob",
	job: "developer",
}

job 프로퍼티는 위에서 선언한 string만 쓸 수 있다.

숫자형 리터럴 타입 예시

아래와 같이 숫자형 리터럴 타입도 사용할 수 있다.

const userName1 = "Bob";
let userName2: string | number = "Tom";

type Job = "police" | "developer" | "teacher";

interface User {
	name: string;
	job: Job;
}

const user: User = {
	name: "Bob",
	job: "developer",
}

interface HighSchoolStudent {
	name: number | string;
	grade: 1 | 2 | 3; // 숫자형 리터럴 타입
}

유니언 타입 (Union Type)

유니언 타입은 | 를 사용해서 표현하고, or의 개념으로 사용된다.

// Union Types

interface Car {
	name: "car";
	color: string;
	start(): void;
}

interface Mobile {
	name: "mobile";
	color: string;
	call(): void;
}

function getGift(gift: Car | Mobile) {
	console.log(gift.color);
	gift.start(); // ❌ error!
}

console.log(gift.color) 에서는 인터페이서 Car과 Mobile 둘 다 color 속성을 가지고 있어서 에러가 나지 않지만, start()는 Car에만 있으므로 위와 같이 에러가 난다.

이런 경우, start() 함수를 사용하기 전에, Car인지 Mobile 인지 확인해야 한다.

// Union Types

interface Car {
	name: "car";
	color: string;
	start(): void;
}

interface Mobile {
	name: "mobile";
	color: string;
	call(): void;
}

function getGift(gift: Car | Mobile) {
	console.log(gift.color);
	if (gift.name === "car") {
		gift.start();
	} else {
		gift.call();
	}
	// ✅ 만약 검사해야할 항목이 많아진다면 **switch**를 사용하는 것이 가독성이 좋다!
}