[TS]Types로 만드는 const 변수 유사품

어떤 변수는 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할 수 있습니다.

 

 

 

 

어떻게보면 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를 활용해보도록 합시다. 

 

 

 

 

 

 

 

<출처 : 코딩애플 - 빠르게 마스터하는 타입스크립트>