Partial 유틸리티타입 직접 구현해보기

나홀로 캡틴판교 강의보고 Partial 구현해보기.

유틸리티 타입 혹은 제네릭 타입이라고도 불리는 것들 중 Partial 은 제네릭으로 넘긴 타입의 구성을 전부 optional하게 변환해주는 타입을 쉽게 만들어준다.

interface Developer {
  name: string;
  skill: string;
  age: number;
}

위와 같이 만들어둔 타입이 있는데 이를 재사용하는 시점에 특정 타입구성만 받고싶을 때, 그 구성의 interface를 가진 새로운 타입을 만들어도되겠지만 최대한 불필요한 코드를 줄이고 중복되는 코드를 줄여나가는 것이 결국 개발자들의 궁극적인 목표가 아니겠는가.

type FakePartial = {
  name?: Developer['name'];
  skill?: Developer['skill'];
  age?: Developer['age'];
};

그렇게 됐을 때 구현해볼 Partial타입의 구조는 위와 같은 형태가 될 것이다. Developer타입이 갖고 있는 타입들을 옵셔널로 갖고 있는 구조이다.

이제 하나씩 중복을 제거해보자.

type FakePartial = {
  [P in 'name' | 'skill' | 'age']?: Developer[P];
};

타입을 구성하는 키값들을 in문으로 순차적으로 순회하며 특정 키인 P를 만들고 해당 키로 Developer의 키를 조회하여 값을 넣어준다.

위의 코드를 한번 더 줄이게되면…

type FakePartial = {
  [P in keyof Developer]?: Developer[P];
};

Developer들의 키들을 keyof로 조회할 수 있을 것이다. 그렇게 했더니 중복되는 마지막 요소인 Developer타입이 발견된다. 이를 제네릭으로 받게되면 어떤 타입을 받던 모든 타입의 구성요소들을 옵셔널처리할 수 있게 된다.

type FakePartial<T> = {
  [P in keyof T]?: T[P];
};

const fake: FakePartial<Developer> = { name: 'json' };

/*
type Partial<T> = {
	[P in keyof T]?: T[P];
}
*/

 

역시 직접 만들어보면 이해가 빠르다.