코딩애플 Typescript - Literal Types로 만드는 const 변수 유사품

김원종·2024년 4월 3일
0

TypeScript 학습

목록 보기
7/28

변수를 만들때는 let 이름 : string; 이런식으로 작성했었는데. 이보다 더 엄격한 타입을 지정할수있다.예를 들어 위 변수에 모든 문자가 아니라 정확히 내가 사전에 등록했던 문자만 들어올수있게 타입을 지정할수 있다.

그런 엄격한 타입을 지정하는걸 Literal Types이라고 한다.
위 이미지 처럼 지정을 해두면 123만 들어갈수있고 그 외 456이 들어가면 에러가 발생한다.
두번째 처럼 선택사항을 넣어서 지정할수도있다. 접니다 처럼 지정을 해두면 대머리 혹은 솔로 둘중 하나의 값이 들어갈수있다.

Literal Types 의 장점은 바로 위와 같은 내용들이다. 변수에 뭐가 들어올지 더 엄격하게 관리가 가능하고 자동완성 힌트도 제공할수 있다.

함수에서도 적용 가능하다 위처럼 a라는 변수에 타입을 지정하는게 아닌 값을 입력해주면 저 함수를 호출할때 무조건 hello만 들어갈수 있다. 이렇게 함수를 만들때 특히 편리한것 같다. 함수 파라미터 자리에 들어올수 있는 자료가 몇개 없다면 Literal Types 제한해두면 매우 유용할 것이다.

이런식으로 Literal Types을 사용해 내가 return을 할 값을 정할수도 있다.


중간 퀴즈
1. 가위 바위 보 중 1개 입력 가능
2. 가위 바위 보 라는 문자만 담을수 있는 array를 return 해야함

정답
function VS(a:'가위'|'바위'|'보'):('가위'|'바위'|'보')[]{

return ['가위'] }


const변수의 한계

const변수는 변하면 안되는 값을 저장하고 싶을때 사용한다고 했는데 한계점이 있다고도 했다.
변수를 만들고 안에 object타입을 넣어두면 objcet안에 있는 내용물은 수정이 가능했었다. 그래서 const변수가 확장성이 좀 부족하다.

const변수를 업그레이드한 버전이 Literal Types이라고 볼수있다. const변수는 내가 변하지 않는 값을 저장할수있다 . 하지만 두개 이상의 값은 넣을수가 없다. 하지만 Literal Types 은 여러가지 넣을수 있다. 즉 자료를 여러개 넣을수 있는 const변수라고 생각해도 괜찮을거 같다.

하지만 Literal Types도 문제는 있다. 위처럼 자료라는 object 형태를 만들고 함수에도 같은 내용인 kim만 받을수 있게 설정해두었다. 하지만 내함수를 호출해서 값을 넘길때 kim이라는 값만 넘기면 되는데 에러가 발생한다. 그 이유는 내가 설정한 a변수의 타입은 'kim'이라는 타입이다 . 자료가 아닌 타입말이다. 자료라는 objcet의 name은 'kim'타입이 아닌 string타입이다. 그러니 타입이 맞지 않는다는 에러를 발생할것이다.

위와같은 문제점을 해결하기 위해서는 여러가지 방법이 있다.
1. object만들때 타입을 미리 지정을 해둬서 타입을 확실하게 지정
2. as문법으로 타입을 속인다. 즉 덮어씌운다.

3.마지막 방법은 objcet 자료를 만들때 타입 지정을 Literal Types 처럼 해달라는 뜻이라고 보면 될거같다.

as const의 효과는 다음과 같다.
1. objcet value 값 그대로 타입으로 지정해준다.즉 위 이미지의 name의 타입은 'kim'타입이 되는것이다.

업로드중..

2.objcet 속성들에 모두 readonly를 붙여준다. readonly 는 objcet속성을 맘대로 못바꾸게 해주는것이다.

이러한 기능을 하는것이 as const라는 기능이다 . objexct 자료를 완전히 잠가놓고 싶다면 as const를 사용해보자.

profile
개린이

0개의 댓글