[TypeScript] Literal Type

1. Literal Type ? 

자바스크립트로 개발을 하다가 특정 변수는 1의 값만 가지게 하고 싶을 때가 있다. 

그럴 경우 보통은 const 키워드를 사용해 

const num = 1;

처럼 선언해서 사용한다. 

 

그런데, 1 또는 0을 가질 수 있게 제한하고 싶은 경우에는 어떻게 해야할까? 

그럴 때 바로 Literal Type을 이용해서 선언하면 된다. 사용하면 미리 정해둔 데이터만 변수가 가질 수 있게 만들어준다. 

 

2. Literal Type 사용법 

TypeScript로 타입을 지정할 때 string, number 같은 타입만 선언할 수 있는 것이 아니다. 

일반 글자같은 것도 타입이 될 수 있다. 

let seo: "개발자";
let kim: "백수";

" 개발자 " 와 " 백수 " 같은 타입도 만들 수 있다. 

이렇게 선언하면 해당하는 타입만 값으로 가질 수 있게 된다. 

 

즉, 특정 글자나 숫자만 가질 수 있게 제한을 둘 수 있다. 

 

let 방향: "left" | "right";
방향 = "left";

or 기호(Union Type )를 사용해서 'left' 혹은 'right' 글자만 가지게 할 수 있는 변수를 만들 수 있다. 

 

function 함수(a :'hello') : 1 | 0 | -1 {
	return 1;
}

함수도 마찬가지로 파라미터 타입 선언할 때 글자나 숫자, return 타입 선언할 때 글자나 숫자를 넣어 

지정할 수 있다. 

 

function 밥(people: 1 | 2 | 3) :("고등어구이"|"소고기국"|"자장면"|"초밥")[] {
	return ["고등어구이", "자장면", "초밥"];
}

return 타입에 배열을 선택해서 return 하고 싶은 경우에도 물론 가능하다. 

 

3. as const 문법

const 자료 = {
    name: "kim"
}

function 함수(a : "kim") {
//  ...
}

함수(자료.name)  // 에러

Literal Type을 통해서 a는 " kim " 이라는 타입의 값만 들어올 수 있는 함수를 만들었고, 

자료의 name은 " kim " 이라는 값을 가지고 있지만 함수(자료.name)은 에러가 난다. 

 

그 이유는 함수는 분명 " kim " 이라는 타입만 들어올 수 있는데,

자료.name은 " kim " 이라는 값을 가진 " string " 타입이기 때문이다. 

 

이것을 해결하고 싶다면,

1. object를 만들 때 미리 타입을 선언해서 해결한다. 
2. assertion을 사용해서 해결한다. 
3. as const를 사용해서 해결한다. 

라는 선택지가 있다. 

 

const 자료:{
	name: "kim"      // 1번 해결
} = {
    name: "kim"
}

const 자료 = {
    name: "kim"
} as const               // 3번 해결

function 함수(a : "kim") {
//  ...
}

함수(자료.name as "kim")  // 2번 해결

as const 라는 키워드는 2가지의 기능이 있다. 

1. 타입을 object의 value로 바꿔준다. ( 즉, 타입을 " kim " 으로 바꿔준다. )
2. object 안에 있는 모든 속성을 readonly로 바꿔준다. ( 변경 시 에러가 난다. ) 

object를 잠그고 싶다면 as const를 활용하면 된다.