[Typescript Challenges] Pick, Readonly, Tuple to Object

Typescript Challenges에 있는 타입스크립트 문제를 easy 단계부터 풀어 보려고 합니다. easy에서는 3문제씩 풀이와 함께 업로드합니다.

Pick

• https://github.com/type-challenges/type-challenges/blob/master/questions/4-easy-pick/README.md
• 문제: Pick<Todo, 'title'>와 같은 결과가 나오도록 타입스크립트로 구현하기

1) K가 우선 interface의 key 값을 기반으로 하는 타입이어야 한다. 따라서 keyof를 활용해 두 번째 제네릭 값을 구성한다. K extends keyof T

2) keyof 결과(=K)가 union이기 때문에 K 중 하나를 key 값으로 두고, value는 해당 key 값에 대한 value가 되게 하면 된다. {[k in K]: T[k]}

type MyPick<T, K extends keyof T> = { [k in K]: T[k] };

Readonly

• https://github.com/type-challenges/type-challenges/blob/master/questions/7-easy-readonly/README.md
• 문제: Readonly<Todo>와 같은 결과가 나오도록 타입스스크립트로 구현하기

1) 모든 요소들이 readonly가 되도록 해야 하기 때문에 Pick 문제와 동일하게 keyof로 key union 값을 추출한다. 요소를 하나씩 돌도록 key는 in, value는 값 참조 형식으로 만든다. [k in keyof T]: T[k]
2) readonly 키워드는 key 값에만 유효하기 때문에 key에 붙여준다. { readonly [k in keyof T]: T[k] }

type MyReadonly<T> = { readonly [k in keyof T]: T[k] };

Tuple to Object

• https://github.com/type-challenges/type-challenges/blob/master/questions/11-easy-tuple-to-object/README.md
• 문제: Tuple(배열)을 key와 value 값이 같은 객체로 변환하는 문제 ['tesla', 'model 1'] => { tesla: 'tesla', 'model 1': 'model 1' }

1) 튜플 타입에서 keyof tuple을 하게 되면 [0, 1, 2, ...]와 같이 인덱스 값을 가지게 된다. 이것을 순회하여 value 값을 똑같이 가지게 한다면 아래와 같다.

• 하지만 이것은 틀린 답이다. keyof T를 실행하게 되면 string | number | symbol이 타입으로 지정된다.

{ [k in T[keyof T]]: k };

2) 답은 간단하다. keyof T로 했던 부분을 number 로 명시해 주면 된다.

type TupleToObject<T extends readonly string[]> = { [k in T[number]]: k };

결론

• 자주 쓰던 문법이고 easy 문제인데도 처음엔 눈앞이 깜깜했다. (결국 정답을 본..) 일주일에 두세개씩 풀어서 타입 감을 올려야겠다.