[TypeScript] - enum, keyof, typeof

 

https://jurgen-94.tistory.com/123

[TypeScript] - 타입 추론 as keyof typeof

 

 

며칠전에 올렸던

keyof typeof 글에 이어서

좀 더 자세히 알아봐야겠다는 생각에

타 블로그 글이랑 강의를 참고하여 연습했는데

그 과정을 공유하고자 한다.

 

 

enum이란?

 

enum은 열거형 변수로 정수를 하나로 합칠 때 편리한 기능이라고 한다.

 

  const enum EnumPractice {
    One,
    Two,
    Three,
    Four,
  }

위의 EnumPractice라는 enum이 있다고 가정했을 때

그 안의 객체들

One,Two,Three,Four (어떤이름으로 해도 상관없다)에

키에 대한 value값을 지정해주지 않을 경우

마우스를 갖다 대보면 

 

타입스크립트가 멋대로 

첫번째 키값부터 

0, 1, 2, 3 이라는 value를 넣어준다.

 

사실 정확히 key값이라고 해야할 지는 모르겠다.

 

그럼 a는 0이되고 b는 1이 된다.

 

  const enum EnumPractice {
    One = 9,
    Two,
    Three,
    Four,
  }

만약 One에 9라는 숫자를 할당할 경우

숫자가 1씩 증가해 

9, 10, 11, 12 가 할당된다.

 

여기서 주의할 점은 

문자열도 할당이 되지만

문자열을 할당할 경우엔 당연하게도 1씩 늘어날 수 없으니

모든 키에 전부 각기 다른 문자열을 할당해줘야 한다.

 

타입스크립트를 사용하고 있지만

enum의 존재를 알고만 있었지

유용하게 사용할일이 있을까? 라고 생각해보면

솔직히 잘 모르겠다.

 

한번도 사용해본 적 없고 

어떤 경우에 사용해야하는지도 이론적으로만

이해하고 있을 뿐이라서 enum말고

keyof와 typeof를 이용해 같은 기능을 구현해보자.

 

 

keyof typeof란?

 

 

객체의 키값과 밸류값을 타입으로 뽑아낼 때 사용한다.

 

  const obj = { a: '123', b: '44', c: '1010' };
  type Key = typeof obj;

 

obj라는 객체가 있다고 가정하고

Key라는 타입에 type obj를 할당하면 

 

Key는

a, b, c가 각각 string으로 이뤄진 객체형식의 타입이 된다.

 

여기에서 

  const obj = { a: '123', b: '44', c: '1010' };
  type Key = keyof typeof obj;

keyof 를 추가해 Key라는 타입에 할당한다면

Key라는 타입은 

a와 b와 c라는 key값 자체가 string이되며 유니온으로 지정된다.

 

이 말인 즉슨

Key를 타입으로 받을 땐 

"a" 혹은 "b" 혹은 "c"라는 문자열밖에 못받는다는 뜻이다.

 

그럼 이 Key라는 타입을 

a의 value인' 123'

b의 value인 '44'

c의 value인 '1010'으로

못박고 지정하고 싶으면

 

  const obj = { a: '123', b: '44', c: '1010' } 

  type Key = typeof obj[keyof typeof obj];

 

이렇게 해주면 되는데 함정이 있다.

Key라는 타입에 마우스 갖다대보면

단순히 string이라고만 나온다.

 

이 때 사용되는게 as const이다.

as const는 읽기전용 상수타입으로 

해당 값만을 받을 수 있도록 엄격하게 바꿔주는 것이다.

 

  const obj = { a: '123', b: '44', c: '1010' } as const

  type Key = typeof obj[keyof typeof obj];

as const로 선언해주면

이제서야 비로소 우리가 원하는 결과 값을 

얻어낼 수 있다.

 

 

 

 

 

js 프로젝트를

타입스크립트로 변환하는 과정에서 알게된

이런저런 ts 개념들이 생각보다 재밌어서

공부를 하게 되는데

다음엔 제네릭에 대해 공부해봐야겠다..ㅎㅎ