[TypeScript] 리터럴 타입 (Literal Types)에 대하여

❓ 리터럴 타입 (Literal Types)

TypeScript에 문자열이나 숫자에 정확한 값을 지정하여 더 엄격한 타입을 지정하는 것.

 

✔ TypeScript에서 const 변수의 한계점에 대해 업그레이된게 리터럴 타입이라고 보면 됨

---

❗ String Literal Types (문자형)

let name_literal :"JiWoo" | "Jihyun";

console.log(name_literal = "JiWoo") // "JiWoo"
console.log(name_literal = "JiWoo1") // error

해당 예제를 보면 문자형 리터럴 타입이 무슨 뜻인지 바로 이해가 갈 것이다.

간단하게 해석해보자면

name_literal에는 "JiWoo" 나 "JiHyun"이라는 문자열만 지정이 가능하게끔 엄격한 타입 지정을 해둔것이다.

그렇기 때문에 첫 번째 console.log에서는 올바른 문자열이 들어갔기 때문에 정상적으로 코드가 동작하는 반면

두 번째 console.log에는 올바르지 않은 문자열이 들어가서 에러를 출력하게 된다.

 

function literalName(name : "JiWoo" | "JiHyun"){
    return console.log(name)
}

literalName("JiWoo") // "JiWoo"
literalName("JiWoo1") // error

문자형 리터럴 타입을 매개변수에서도 지정이 가능하고,

function literalName():"JiWoo" | "JiHyun"{
    return "JiWoo"
}

literalName()

해당 예제처럼 return 값에도 엄격하게 타입을 지정할 수 있다.

 

Numeric Literal Types(숫자형)도 있지만 사용법은 동일하기에 다루지 않겠다.

---

❗ Template Literal Types (템플릿형)

String Literal 을 기반으로 새로운 타입을 만드는 문법이다.

 

바로 예시를 보며 살펴보자.

type Name = "JiWoo"
type FirstGreeting = `hello ${Name}`

let first_greeting :FirstGreeting; // type 지정 => "hello JiWoo"

사용법은 매우 쉽다.

ES6의 템플릿 리터럴과 동일하게 쓰인다

 

하지만 템플릿 리터럴은 해당 예제처럼 사용하면 타입 지정시에 코드를 많이 간소화 시키고

높은 가독성을 제공할 수 있을것이다.

type Name1 = "JiWoo" | "JiHyun"
type Name2 = "JiWoong" | "JiHyung"
type HelloPerson =  `Kim ${Name1 | Name2}`;

let greeting :HelloPerson;

해당 예제를 보면 Name1과 Name2라는 2가지 타입에 문자열이 담겨있고 

HelloPerson이라는 타입에 템플릿 리터럴을 통해 앞에 Kim을 붙히고 Name1과 Name2에 대해 or 연산자를 사용하여 타입을 지정해주었다.

 

생각해보자.

과연 HelloPerson의 타입은 어떻게 지정이 되어있을까.

놀랍지 않은가....?

정말 편하다 ! 

좋다 !

 

더 깊게 다루는건.... 나중에 다뤄보자

---

❗ Literal Type 문제점

var data = {
    name : "kim"
}

function dataFunc( a : "kim"){
    return console.log(a)
}

dataFunc("kim") // "kim"
dataFunc(data.name) // error

Literal Type의 문제점에 대한 예시이다.

해당 코드에서의 두 번째로 호출하는 함수는 에러가 난다.

왜 일까?

 

함수의 타입 지정을 살펴보면 답이 나온다.

dataFunc이라는 함수에서의 매개변수는 "kim"이라는 문자열 타입만 들어올 수 있다고 지정을 해놓은것이다.

헷갈려선 안된다.

"kim"이라는 자료를 넣어서는 안된다. 오직 "타입"

data.name에는 "kim"이라는 문자열이 value값으로 담겨져있지만

매개변수에 들어가게되는 data.name은 "자료"이다.

 

👍 하지만 해당 방법에 대한 문제 해결법이 있다

var data = {
    name : "kim"
} as const

function dataFunc( a : "kim"){
    return console.log(a)
}

dataFunc(data.name) // "kim"

바로 "as const"이다. as const에 대해서 간단히 알아보자면

• object의 key값에 대한 value값을 타입으로 지정한다.
• object 속성들에 모두 readonly를 붙혀서 엄격한 타입으로 지정해준다.
  • object의 속성에 readonly를 부여해준다면 data 이름을 가진 object의 name이라는 키 값의 value값을 읽기만 할 뿐 변경할 수는 없게끔 하는 것이다.

그냥 간단히 말해서 object 자료를 엄격한 타입으로 지정하는것이다.