TypeScript

[TypeScript] Literal Type

최성2 2022. 2. 17. 19:50

 

특정 글자나 숫자 같은 정확한 값을 지정할 수 있다

더 엄격한 타입 지정이 가능하다

// let last: string
let last: 'choi'

"a에는 choi 만 들어올 수 있다" 라는 뜻이다

 

let last: 'choi'
last = 'kim'
//에러 발생

 

📌 리터럴 타입의 자동 완성 기능

 

함수에서 강점을 보이는데,

function hi(a: 'hello'): 1 | 0{
  return 1
}

hi('hello')

지정 값만 파라미터로 넣을 수 있고, 지정 값만 return 할 수 있게 해 준다

 

 

🟥 문제점

let member = {
  name: 'kim'
}

function mem(x: 'kim') {

}

mem(member.name)
//에러 발생

member.name은 string타입이고, kim은 'kim' 타입이기 때문에 에러가 발생한다

 

 

✅ 해결 방안

1) object에 타입을 추가하거나

let member: { name: 'kim' } = { 👈
  name: 'kim'
}

function mem(x: 'kim') {

}

mem(member.name)

 

2) assertion 사용한다

let member = {
  name: 'kim'
}

function mem(x: 'kim') {

}

mem(member.name as 'kim') 👈

 

3) 그것도 아니라면 object에  as const 를 사용해라

let member = {
  name: 'kim'
} as const

function mem(x: 'kim') {

}

mem(member.name)

"object의 타입을 literal type으로 해주라"

 

📌 as const 기능

- object의 value로 타입을 변경해준다

- object의 모든 속성을 readonly로 변경해준다

 

 

 

Ref

https://codingapple.com/course/typescript-crash-course/

 

빠르게 마스터하는 타입스크립트 - 코딩애플 온라인 강좌

  누구나 마음 한켠엔 나만의 웹서비스를 만들고 싶어합니다. 프론트엔드는 어찌저찌 하겠는데 서버 만드는게 어렵고 귀찮다고요? 그렇다면 Firebase를 쓰십시오.   구글이 웹서버를 대신 만들어

codingapple.com