개발/타입스크립트 챌린지

[TSCH][타입스크립트 연습](3) Omit 구현

Junghyun Kim 2022. 3. 28. 23:34
반응형

오늘의 문제

Omit 유틸리티 타입은 지난 번에 구현한 ReturnType과 마찬가지로 실제 코드에서도 많이 사용할 수 있는 유틸리티 타입이다.
오늘은 이번 문제를 풀어보려고한다.

먼저 코드를 보고 풀어보는 것이 좋을 듯하다.

https://tsch.js.org/3/play

 

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

www.typescriptlang.org

 

타입스크립트 플레이 그라운드


문제 분석

타입 T는 오브젝트 형태로 들어오게 되고, K는 유니온 타입으로 들어온다.
먼저 K의 형태와는 상관없이 T의 형태 그대로 반환하는 타입을 토대로 문제를 풀어본다.

type MyOmit<T, K> = {
  [key in keyof T]: T[key]
}

 

T 타입을 그대로 반환하는 타입이다.
이제 남은 것은 key가 K에 속한다면 never로 만들고 그렇지 않으면 key 그대로 두는 것이다.

Type parameter 'key' has a circular constraint.

위 코드를 통해 구현하고자한 내용은 아래와 같다.
T의 key들을 순회하면서 각각의 key가 K의 집합 내에 속한다면 거른다.

그러나 빨같 밑줄과 함께 에러가 났다.


여기서부터 막혔다.
생각한 내용 그대로 구현하지않았나 싶었다.
문법이 더 약한가싶어서 타입스크립트 공식 문서를 뒤져봐도 내용이 더 이상 나오지 않았다.
왜 circular constraint 일까..?

결국 포기하고 타입스크립트 공식 문서의 내용을 살펴보았다.

타입스크립트 공식 문서에 나온 Omit 유틸리티 타입의 구현

Omit의 구현은 Exclude 라는 유틸리티 타입을 이용하여 이루어져있다.
간략히 요약하자면 T 타입의 키 중에서 K를 제외한 키들을 Omit 타입의 키로 삼고 해당 키의 타입은 T타입에서 참조한다라는 내용이다.
그러나 이 구현은 Exclude의 구현 내용을 또 찾아봐야한다.

타입스크립트 공식 문서에 나온 Exclude 유틸리티 타입의 구현

Exclude의 구현 내용은 차집합과 같다.
T 타입에서 U 타입의 원소들을 제거한 것이다.
사실 언뜻봐서는 타입의 구현이 와닿지는 않을 수도 있다.
지금 내가 그런 상황이다.
그럼에도 저 내용을 숙지해야한다.


혹시 나와 같은 생각으로 구현한 사람이 있지 않을까 다른 개발자들이 만들어놓은 솔루션을 찾아보았다.
그러다 비슷한 구현 코드를 발견했다.

처음에 생각한 구현 방법과 비슷한 방식으로 접근한 구현 방법

Nabe847 유저는 as 키워드를 사용해서 구현했다.
as 키워드로 구현을 한 것을 보니 구현 내용도 썩 잘 이해가 가서 마음에 들었다.
as 키워드를 조금 더 눈여겨봐야겠다.

아래는 기록용으로 as 키워드의 공식 문서 위치를 적는다.

TypeScript: Documentation - Mapped Types (typescriptlang.org)

 

Documentation - Mapped Types

Generating types by re-using an existing type.

www.typescriptlang.org

 

반응형