[타입챌린지 - EASY] 11 - Tuple to Object

문제

https://github.com/type-challenges/type-challenges/blob/main/questions/00011-easy-tuple-to-object/README.ko.md

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as const;
type result = TupleToObject<typeof tuple>   // expected { tesla: 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

 

풀이

type TupleToObject<T extends readonly any[]> = {
  [V in T[number]]: V
}

 

How to Solve?

1. T extends readonly any[]: any 타입의 원소를 갖는 읽기만 가능한 배열을 조건으로 하는 T를 정의한다.
2. [V in T[number]]: V: T는 Tuple(길이와 타입이 고정된 배열)이다. 그리고 number는 튜플을 순회할 때 사용할 수 있다.

 

새로 알게된 점

as const (const assertion)

const assertion은 상수라고 주장하는 것이다. 예를 한번 들어보자.

const ts = 'TypeScript';   // type: 'TypeScript'
let ts = 'TypeScript';   // type: string

 

 

위의 코드를 보면 차이점이 뭘까? const로 선언하면 그 값 자체를 Type으로 받아온다. 참고로 string 같이 이미 지정된 타입인 경우에는 Primitive Type이라고 하며, 할당된 특정 값 그 자체를 Type으로 취급하는 것을 Literal Type 이라고 한다.

 

const SHAPE_TYPES = {
  CIRCLE: 'circle',
  RECTANGLE: 'rectangle',
  TRIANGLE: 'triangle',
};   // { CIRCLE: string; RECTANGLE: string; TRIANGLE: string;

const TEMP_SHAPE_TYPES = {
  CIRCLE: 'circle',
  RECTANGLE: 'rectangle',
  TRIANGLE: 'triangle',
} as const;   // { readonly CIRCLE: 'circle', readonly RECTANGLE: 'rectangle' ... }

 

 

as const를 사용하면 TypeScript에게 특정 값이 변경되지 않을 것임을 알려준다. 그리고 객체의 모든 필드를 readonly로 만들고 배열인 경우 readonly 배열로 만들어주며 리터럴 값은 그 값 자체의 타입으로 추론한다.

 

그래서 위의 코드를 보면 as const를 사용하지 않으면 각 속성 값은 string으로 추론되는 것을 볼 수 있다. 이것은 circle이라는 값이 아닌 다른 string 값도 할당될 수 있다는 것이다. 하지만 as const를 사용하게 되면 type 값이 값 그 자체인 circle이 될 수 있기 때문에 다른 string 값이 할당될 수 없다.

 

후기

아 이 문제는 number를 몰라서... 못풀은 것 같다. 튜플을 어떻게 순회해야 하지? 라는 생각을 계속했는데 결국은 해결하지 못했다 ㅠ

그래도 하나 알아가서 행복!

---

- https://baek.dev/post/50/

TypeScript의 강력함: Discriminated Union과 as const 활용하기 | 아웃풋 트레이닝

- https://velog.io/@jinyoung234/Type-Challenge-

Type Challenge - Tuple to Object