[Typescript]Literal Types &as const (5)
어떤 변수는 1이라는 값만 가질 수 있게 제한하고 싶으면 어쩌죠.
자바스크립트 const 변수 쓰면 되겠군요. 근데 1 또는 0만 가질 수 있게 제한하고 싶으면 어쩌죠.
그 변수에 number 이런 식으로 타입을 지정하면 너무 광범위하지않습니까.
그럴 땐 Literal type을 선언하도록 합시다. 어떤 변수가 미리 골라놓은 데이터만 가질 수 있게 도와줍니다.
Literal Type 만드는 법
string, number 이런 것만 타입이 될 수 있는게 아닙니다.일반 글자같은 것도 타입이 될 수 있습니다.
let john :'대머리';
let kim :'솔로';'대머리', '솔로'라는 타입을 만들었습니다 마음대로 변수나 함수에 할당 가능합니다.
그럼 신기하게도 john이라는 변수는 이제 '대머리' 라는 글자만 할당할 수 있습니다. kim이라는 변수는 이제 '솔로' 라는 글자만 할당할 수 있습니다.
특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type 이라고 부릅니다. 더욱 엄격한 실드라고 보면 되겠습니다
let 방향: 'left' | 'right';
방향 = 'left';or 기호 써도 됩니다. 이제 'left' 또는 'right' 글자만 가질 수 있는 변수가 완성되었군요.
function 함수(a : 'hello') : 1 | 0 | -1 {
return 1
}함수도 똑같습니다. 파라미터 타입선언할 때 글자나 숫자를 집어넣으시면 그 만 파라미터로 넣을 수 있고 return 타입선언할 때도 글자나 숫자를 집어넣으시면 그 값만 return할 수 있습니다.
Q. 이런 함수는 어떻게 만들까요?
- '가위', '바위', '보' 문자들만 파라미터로 입력할 수 있고
- '가위', '바위', '보' 라는 문자들만 담을 수 있는 array 자료만 return 할 수 있습니다.
- 예를 들면 ['가위', '보', '가위'] 이런거 return 가능
- ['가위', '바보'] 이런거 return하면 에러나야함
function rock(a : '가위'|'바위'|'보') :('가위'|'바위'|'보')[]{
return ['가위','보']
} 이렇게 했다고 합니다. ['가위','보'] 이런거 return 해봤을 때 에러안나면 성공입니다.
array 자료를 타입지정하고 싶으면
number[] 이렇게 하지 않습니까
근데 number가 아니라 literal type으로 가득채웠다고 합니다.
어떻게보면 const 변수의 업그레이드버전이라고 보면 되는데
const 변수는 값을 바꿀 수 없는 변수입니다.
const 변하면안되는변수 = 123;그래서 중요한, 변하지않는 정보를 저장하고 싶을 때 const를 자주 쓰는데가끔은 변하는 중요한 정보를 저장하고 싶을 땐 const가 무쓸모입니다.예를 들어 변수가 'kim' 또는 'park' 만 가질 수 있는 이런 식의 엄격한 변수는 못만듭니다.
const 이름 = 'kim' | 'park' (이런 식의 문법은 자바스크립트에 없음)그럴 때 타입스크립트 설치하고 literal type 쓰면 되는 것입니다.
as const 문법
'kim' 이라는 타입만 들어올 수 있는 함수를 만들었습니다. 근데 자료.name을 입력하고 싶은겁니다.
var 자료 = {
name : 'kim'
}
function 내함수(a : 'kim') {
}
내함수(자료.name)그래서 코드를 이렇게 짜봤는데 위 코드는 에러가 납니다.왜냐면 함수는 'kim' 타입만 입력할 수 있다고 해놨고 자료.name 이라는건 string 타입이지 'kim' 타입이 아니기 때문입니다.
이런걸 해결하고 싶으면
1. object 만들 때 타입을 잘 미리 정하든가
2. 예전에 배웠던 assertion을 쓰시든가 (as 'kim' 이런걸 붙이는 겁니다)
3. 아니면 as const 라는걸 애초에 object 자료에 붙일 수 있습니다.
var 자료 = {
name : 'kim'
} as const;
function 내함수(a : 'kim') {
}
내함수(자료.name)as const는 효과가 2개인데
1. 타입을 object의 value로 바꿔줍니다. (타입을 'kim'으로 바꿔줍니다)
2. object안에 있는 모든 속성을 readonly로 바꿔줍니다 (변경하면 에러나게)
object를 잠그고 싶으면 as const를 활용해보도록 합시다.