리터럴(literal) 타입 활용 방법을 예시를 통해 배우기

"리터럴(literal) 타입"은 뜻 그대로 읽기 전용이라는 의미이다. 즉, 리터럴 타입은 읽기만 가능할 뿐, 수정할 수 없다.

 

간단한 예시로 리터럴 타입이 무엇인지 이해해보자.

type ImageType = "png"

const imageType: ImageType = "png"
const imageType2: ImageType = "jpg"

 

위의 코드처럼, 리터럴 타입으로 ImageType을 "png" 값으로 선언하였다. 그리고 ImageType 타입을 상속받아서 선언된 두 개의 변수가 있다. 하나는 "imageType", 또 다른 하나는 "imageType2"이다. 

 

"imageType" 변수는 "png" 값으로 선언이 되었다. 이는 리터럴 타입으로 선언한 것과 같은 값이기 때문에 에러가 발생하지 않는다.

그러나, "imageType2" 변수는 리터럴 타입이 "png"로 선언된 것과 달리 "jpg"로 선언이 되었음으로 에러가 발생한다. 왜냐하면, ImageType의 리터럴 타입은 "png"만 허용이 되기 때문이다.

 

또 다른 예시를 들어보자.

type Direction = "left" | "right" | "up" | "down"

function navigate(dir: Direction) {
	console.log(dir)
}

만약 위처럼 리터럴 타입을 선언하고, navigate 함수의 dir에 Direction 리터럴 타입을 적용시켰다.

 

navigate("left")
navigate("right")

만약, 위 처럼 사용했을 때, 결과는 어떻게 될까? 문제없이 실행이 될 것이다. 왜냐하면, 리터럴 타입으로 값을 선언한 것과 사용한 값이 같기 때문이다.

 

navigate("back")
navigate("Left")

그러나, 위 처럼 사용한다면 에러가 발생할 것이다. 리터럴 타입의 선언된 값과 다르기 때문이다. 사용할 값들은 리터럴 타입에서 선언된 값과 같아야 된다.

 

실제로, 실무에서 자주 사용하는 리터럴 타입의 사용 방법을 알아보자.

type btnType = "btn-default" | "btn-error" | "btn-success"
type btnSize = "sm" | "md" | "lg"
type btnColor = "red" | "blue" | "green"

type buttonStyle = `${btnType}-${btnSize]-${btnColor}`

위 처럼 리터럴 타입에 우리가 사용할 조건들을 선언한다. 위 처럼 선언할 경우, 한 번에 타입 정의로 27개를 만들 수 있게 된다.

 

위 처럼 구현하면, 스타일을 조합해서 다른 변수나 함수에 전달해야 할 때 굉장히 유용하게 사용될 수 있는 패턴이 된다.

그래서 우리는 아래와 같이 사용할 수도 있게 된다.

const addStype = (el: HTMLElement, style: buttonStyle) => {
	el?.classList.add(style)
}

 

이제, const assertion 문법에 대해 알아보자.

const languageCode = {
	en: "English",
    es: "Spanish",
    fr: "French",
    kr: "korean"
}

위 코드는 객체 선언을 하였다. 위 코드의 값을 수정할 수 있을까?

 

languageCode.en = "ENGLISH";

당연히, 리터럴 타입이 아니기 때문에 값 수정이 가능하다. 왜냐하면, 타입스크립트가 객체를 "string" 타입의 유효한 타입으로 추론을 하였기 때문이다. 그렇기 때문에, 어떤 문자열을 입력해도 오류가 발생하지 않는다.

 

그러나, 이를 허용하지 않고 싶거나, 값의 변경을 허용하고 싶지 않다면, 리터럴 타입을 선언해주면 된다.

 

const languageCode = {
	en: "English",
    es: "Spanish",
    fr: "French",
    kr: "korean"
} as const;

"as const"를 선언해주면 리터럴 타입이 적용이 되며, 읽기 전용이 된다. 그래서 객체의 값의 수정이 불가능하게 된다.

타입스크립트가 "string" 타입으로 추론하는 것에서 읽기 전용이 되어 각 값이 정해지게 된다.

 

languageCode.en = "ENGLISH";

그렇기 때문에, 위 처럼 다시 수정을 요청을 한다고 해도 더 이상 허용되지 않고 에러를 발생하게 된다.