[TypeScript] Literal Types 만드는 법 그리고 as const

Eden·2023년 1월 29일
0

TypeScript

목록 보기
7/10
post-thumbnail

어떤 변수가 있는데 100이라는 값만 가질 수 있게 제한하고 싶으면 어떻게 할 수 있을까?자바스크립트의 const 변수를 쓰면 된다. 그런데 1 또는 0만 가지게 하고 싶으면 어떻게 할 수 있을까? 그 변수에 number 이런 식으로 타입을 지정하면 너무 광범위하다.
그럴 때 Literal Type을 선언하면 됩니다. Literal Type은 어떤 변수가 미리 골라놓은 데이터만 가질 수 있게 도와준다.

Literal Type 만드는 법

string, number 이런 것만 타입이 될 수 있는 것은 아니다.
일반 글자같은 것도 타입이 될 수 있다.

'머머리', '빡빡이'라는 타입을 만들었다. 마음대로 변수나 함수에 할당 가능하다.

그럼 신기하게도
ab라는 변수는 이제 '머머리'라는 글자만 할당할 수 있다.
cd라는 변수는 이제 '빡빡이'라는 글자만 할당할 수 있다.
특정 글자나 숫자만 가질 수 있게 제한을 두는 타입을 literal type이라고 부른다.
더 엄격한 실드라고 볼 수 있다.


or 기호를 쓸 수도 있다. M은 '머머리' 또는 '빡빡이' 글자만 가질 수 있는 변수가 완성됐다.

함수도 똑같다.

파라미터 타입을 선언할 때 글자나 숫자를 집어넣으면 그 값만 파라미터로 넣을 수 있고,
return 타입을 선언할 때도 글자나 숫자를 집어넣으면 그 값만 return할 수 있다.

Q. 이런 함수는 어떻게 만들 수 있을까?

  • '가위', '바위', '보' 문자들만 파라미터로 입력할 수 있다.
  • '가위', '바위', '보' 라는 문자들만 담을 수 있는 array 자료만 return 할 수 있다.
  • 예를 들면 ['가위', '보', '가위'] 이런거 return 가능..!
  • ['가위', '바보'] 이런거 return하면 에러가 난다.

A:

이렇게 할 수 있다.




어떻게보면 const 변수의 업그레이드 버전이라고 보면 되는데 const 변수는 값을 바꿀 수 없는 변수다.


그래서 중요한, 변하지 않는 정보를 저장하고 싶을 때 const를 자주 쓰는데 가끔은 변하는 중요한 정보를 저장하고 싶을 때는 const가 쓸모가 없다.
예를 들어 변수가 '머머리' 또는 '빡빡이'만 가질 수 있는 이런 식의 엄격한 변수는 만들 수 없다.

이런 식으 문법은 자바스크립트에 없다.
그럴 때 타입스크립트를 설치하고 literal type을 쓰면 된다!

as const 문법

'kim'이라는 타입만 들어올 수 있는 함수를 만들었다.


자료.name을 입력하고 싶어서 코드를 이렇게 짰을 때, 에러가 난다.

함수는 'kim'타입만 입력할 수 있다고 했고, 자료.name이라는 것은 string 타입이지 'kim'타입이 아니기 때문이다.

이런걸 해결하고 싶으면
1. object 만들 때 타입을 미리 정하고,
2. 예전에 배웠던 assertion을 쓰고 (as 'kim' 같은 것을 붙이기)
3. 아니면 애초에 object자료에 as const라는 것을 붙일 수 있다.

as const는 효과가 2개인데,
1. 타입을 object의 value로 바꿔주고 (타입을 'kim'으로 바꿔준다)
2. object안에 있는 모든 속성을 readonly로 바꿔준다. 변경하면 에러가 난다.

object를 잠그고 싶으면 as const를 활용할 수 있다.

profile
peanutbuttersandwich🥜

0개의 댓글