[타입챌린지 - EASY] 4 - Pick

지금 TS를 사용하면서 백엔드 프로젝트를 진행하고 있는데 TS에 대해 겉핥기 식으로만 알면서 프로젝트를 하다 보니까 잘 사용하지 못하는 것 같다고 판단이 되었다.

 

NestJS 오픈카톡방 커뮤니티에서 공유받아서.. 오늘부터 Type Challenge 라는 GitHub Repository에 들어가서 하루 또는 2일에 2문제씩 문제를 조금이나마 풀어보려고 한다.

 

문제

- https://github.com/type-challenges/type-challenges/blob/main/questions/00004-easy-pick/README.md

 

풀이

/**
 * (1) K는 T의 Key-Properties 이다 ==> MyPick<T, K extends keyof T>
 * (2) K를 순회한다 ==> [B in K] (B는 K를 순회하면서 저장하는 변수)
 * (3) T의 Key인 B에 대한 Value를 가져온다 ==> T[B]
 */
type MyPick<T, K extends keyof T> = {
  [B in K]: T[B]
};

 

How to solve?

우리가 구현할 것은 TypeScript Utility Class의 Pick 타입이다. Pick은 Pick<T, K> 형태로 사용하고, T 타입으로 부터 K 프로퍼티만 추출한다는 의미가 있다. 하지만 문제에서는 Pick을 사용하지 말라고 되어있다. 따라서 우리는 저 의미를 가지고 하나하나 따져가며 타입을 작성해야 한다.

 

(1) MyPick<T, K extends keyof T>

결론을 먼저 말하자면 제네릭 T와 K를 정의할건데, K는 T의 Key를 값으로 가지는 Type이라는 것을 의미한다.

제네릭에 대한 설명은 생략하도록 하겠다.

 

extends keyof에 대해서 설명하자면.. 

interface Person {
 id: number;
 name: string;
}

type PersonKeys = keyof Person;   // "id" | "name"

 

• keyof: 타입 값에 존재하는 모든 프로퍼티의 키 값을 Union 형태로 받는다. 위의 코드를 참고하세용!
• extends: 증말루 다양하게 쓰이는 놈이다. 하지만 여기서 이거 하나만 기억하자. extends는 부분집합이라고 생각하면 된다. K extends keyof T 이기 때문에 K라는 놈은 T의 하위타입으로 제한이 된다.

extends와 keyof를 알게 된다면 위의 내용은 쉽게 이해할 수 있을 것이라고 생각된다.

(2) [B in K]: T[B]

K에 해당하는 값들을 B라는 값으로 정의한다. 그리고 그 값들의 타입은 T[B] 이다.

• [B in K]: for const B of K 라고 이해하면 아주 쉽다 ㅎㅎㅎ
• T[B]: obj['key'] ==> T[keys] ==> T[B]

 

후기

이번에 처음으로 풀어봤는데... 결국 다른 분의 풀이를 참고해서 문제를 풀었다. 와.. 생각보다 어려웠고 코드를 거의 작성하지 못했다.

하지만 다른 분의 풀이를 보고는 이해하기는 너무 쉬웠다. 꾸준하게 문제를 풀면서 정진해보자..

 

그래도 Pick을 직접 이제 구현할 수 있다는 것에 뿌듯하다.

 

참고자료

- https://suloth.tistory.com/25

타입챌린지 : 4-Pick (easy)

 

- https://medium.com/harrythegreat/typescript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-7ae8a786fb20

Typescript 유틸리티 클래스 파헤치기

 

- https://velog.io/@youngkiu/in-keyof-extends-keyof

TypeScript - `in keyof`, `extends keyof`

 

- https://velog.io/@dongkyun/TS-extends-%ED%82%A4%EC%9B%8C%EB%93%9C-%ED%99%9C%EC%9A%A9

[TS] extends 키워드 활용