오브젝트의 value 값을 readonly로 const와 유사한 형식으로 keyword를 사용해 값을 선언 '후' 다른 값으로 변경 못하게 막아버리는데...
오브젝트만 너무 특별 취급 하는 것 아니냐 할 수 있다.
Typescript v 4.1 이상부터 literal type 이라는 타입과 값을 확정 시켜버리는 문법이 있다.
Literal Type
Literal Type 만드는 법
string, number 이런 것들만이 타입이 될 수 있는것이 아니다.
더욱이 string,number 라는 것도 General 하게 'string' || 'number' 만으로 타입 제한을 두는 것일 뿐
더욱더 세부적으로 값까지 타입을 지정시킬 수 가 있다.
let 투투 : '투투'투투,choi 라는 타입을 만들었다. 마음대로 변수나 함수에 할당 가능한데...
투투 = '내강아지임'이렇게 투투라는 변수에 '내강아지'라는 값을 할당 하려 했는데
이러한 타입에러 문구가 나온다.
헷갈리는 나를 위해...
타입 지정을 위와 같이 문자열 || 숫자로 지정해 놓으면
- 타입은 'string' 인데, 'string'에서 '내 강아지'라는 타입만 가능합니다.
라는 말이다.
_먼 말이지??? 🙄
Object를 생각해보자
const 투투 : {name:string} = {age :13}위와 같이 {}의 타입을 name과 string 으로 지정했지만 실질 적으로 투투의 값 할당은 {age:13} 이다.
위와 같이 type error 문구가 뜬다.
object를 생각해보면 타입 지정을 할 때 key 값에도 무엇을 넣을지 결정 하지 않는가?
위와 같은 맥락으로 받아들여보자
다시 돌아와서
let 방향 : 'left' | 'right'
방향 = 'left';or 기호를 사용하여 방향이라는 변수의 타입을 union literal type으로 만들 수가 있다.
function 함수(a : 1) : 1 | 0 | -1 {
return 1
}
함수(2)-
함수도 파라미터의 타입을 선얼 할 때 글자 | 숫자를 집어 넣으면,
그 글자 | 숫자만 넣을 수 있고 -
return 타입 선언할 때도 글자나 숫자를 집어 넣으면 그 값만 return 할 수 있다.
const와 함께하는 두근두근 union liter type
const 변수 : 'string' | 1 = 1 // 합격
const 변수 : 'string' | 1 = 2 // 불합격
const 변수 : string | 1 = 'asdf' // 합격
const 변수 : 'click'| false = false // 합격- boolean도 특정지을수 있네위 처럼 boolean 값중 특정 값만을 타입을 지정 할수도 있는것을 알게 되었다.
as const 문법
var 자료 = {
name : 'kim'
}
function 내함수(a : 'kim') {
}
내함수(자료.name) // 'kim'인데 에러가 뜬다??함수는 'kim' 타입만 입력할 수 있다고 해놨고
자료.name은 string 타입이지 'kim' 타입이 아니다.
해결하고 싶다면
- object 만들 때 타입 지정을 literal로 하던지
- assertion을 쓰든가 (as 'kim')
- as const 라는걸 object 자료에 붙이자
var 자료 = {
name : 'kim'
} as const;
function 내함수(a : 'kim') {
}
내함수(자료.name)as const의 효과는 2가지인데..
- 타입을 object의 value로 바꿔준다.
- object안에 모든 속성을 readonly로 바꿔준다.
as const 더 알아보기
그렇다면 object만 되는 걸까?? 🙄
string as const
var str = '안녕' // var str : string
var str = '안녕' as const // var str : "안녕"str 에 마우스 hover 하면 위의 타입이 바뀐것을 볼 수 있다.
값을 변경하면...
var str = '안녕' as const
str = 'bye'
에러가 뜨는것을 확인하면서 값을 바꿀수 없게 되었다.
number as const
var num = 1 // var num : number
var num = 1 as const // var num : 1number 에 마우스 hover 하면 위의 타입이 바뀐것을 볼 수 있다.
값을 변경하면...
var num = 1 as const
num = 2
에러가 뜨는것을 확인하면서 값을 바꿀수 없게 되었다.
Array as const
var arr = [1,2,3,4,'d'] // var arr : (string|number)[]
var arr = [1,2,3,'4'] as const // var arr: readonly [1, 2, 3, "4"]arr 에 마우스 hover 하면
as cosnt 가 붙은 arr에는
readonly가 붙으면서 타입이 바뀐것을 확인 할 수 있다.
값을 변경해보면
var arr = [1,2,3,'4'] as const
arr[0]=2
에러가 뜨면서 readonly-only property 라고 뜨면서 값을 변경할 수 없다는 경고문 이뜬다.
그런데 readonly가 왜 Array 와 object에만 있지?? 🙄
A . 객체의 keyword 임
Sample
var color = 'red' as const
var div = document.querySelector("#div") as HTMLDivElement
function a(a:typeof color){
div.style.color = a // a가 값이자 type이며 readonly이다.
}
a(color)결론
- literal Type은 타입일뿐 값이 아니다.
- 단지 타입을 string | number보다 더 세분화 하는 것일뿐
- as const 는 결국 type을 단언 하면서 단언된 타입을 값으로 정해주고 readonly로 해주는 3가지 종합세트!!
type LiteralType = 'string' // 값이 아니다.... type이다..
const num = 1 as const // 값이자 type이며 readonly임