주입받은 제네릭 객체가 가진 프로퍼티 타입 동적 추론(infer)하기. 그리고 트리 쉐이킹

주입받은 객체의 프로퍼티인 selector Atom과 action Atom을 각각 state화 하는 wrapping 함수를 만들고자 한다.
이 과정에서 매개변수로 전달받은 selectorAtom과 actionAtom의 타입 추론을 유지하기 위해, 주입받은 타입의 필드들을 동적으로 추론해야 한다.

import { Atom, WritableAtom } from 'jotai';

export type ExtractSelectors<T> = {
  [P in keyof T]: T[P] extends Atom<infer V> ? V : never;
};

export type ExtractActions<T> = {
  [P in keyof T]: T[P] extends WritableAtom<any, infer U, void>
    ? (param: U[0]) => void
    : never;
};

규모가 조금씩 커져 나아가 코드가 복잡해지자 위처럼 타입 정의 파일을 따로 분리하였는데 이것이 화근이었다.

---

Treeshaking은 타입을 찢어

트리 쉐이킹 사이드 이펙트를 고려하지 않았기 때문이다. 트리 쉐이킹 과정에서 사용되지 않는 코드가 제거되는데, 동적으로 객체의 field의 값을 확인하는 함수가 제거되어 타입 추론에 문제가 발생한 경우이다.

import { ExtractSelectors, ExtractActions } from 'types';

export const useManager = <T extends AtomManager<any>>(manager: T) => {
  const selectors = Object.fromEntries(
    Object.entries(manager.selectors).map(([key, atom]) => [
      key,
      useAtomValue(atom),
    ])
  ) as ExtractSelectors<T['selectors']>;

  const actions = Object.fromEntries(
    Object.entries(manager.actions).map(([key, actionAtom]) => [
      key,
      useSetAtom(actionAtom),
    ])
  ) as ExtractActions<T['actions']>;

  return { selectors, actions };
};

위 코드는 번들링을 진행하기 전, 정상적으로 타입을 추론했으나 패키지 배포한 이후, type이 selectors와 actions의 type이 각각 ExtractActions<T['actions']>와 ExtractActions<T['actions']>로 고정되는 이슈가 발생했다. (사용처에선 전부 any. 즉, 타입 추론이 사라짐.)

고민을 하다 결국 트리쉐이킹의 사이드 이펙트인 것인 것을 고려하게 되었고 import한 type들을 사용처 내부로 다시 불러와 이슈를 해결하였다.

---

DX 그리고 UX

간단하지만 재밌는 고민 점이 하나 더 생겼다. DX와 UX가 음의 상관관계를 갖는 의사결정을 마주하였기 때문이다.

DX가 좋고 UX가 나쁜 Type assertion => TypeWrapping

type ExtractSelectors<T> = {
  [P in keyof T]: T[P] extends Atom<infer V> ? V : never;
};

type ExtractActions<T> = {
  [P in keyof T]: T[P] extends WritableAtom<any, infer U, void>
    ? (param: U[0]) => void
    : never;
};

export const useManager = <T extends AtomManager<any>>(manager: T) => {
  const selectors = Object.fromEntries(
    Object.entries(manager.selectors).map(([key, atom]) => [
      key,
      useAtomValue(atom),
    ])
  ) as ExtractSelectors<T['selectors']>;

  const actions = Object.fromEntries(
    Object.entries(manager.actions).map(([key, actionAtom]) => [
      key,
      useSetAtom(actionAtom),
    ])
  ) as ExtractActions<T['actions']>;

  return { selectors, actions };
};

이런 방식으로 DX가 좋게 Selectors와 Actions를 Extract하는 type을 분리한 뒤, 코드를 작성 및 배포한다면, 사용자가 useManager를 hover했을 때 아래의 type추론을 확인하게 된다.

(alias) useManager<Playlist>(manager: Playlist): {
    selectors: ExtractSelectors<{
        playlist: Atom<Music[]>;
        currentMusic: Atom<Music>;
    }>;
    actions: ExtractActions<...>;
}
import useManager

그냥 그런가보다 할 수 있지만, 사용자 입장에선 useManager 내부의 ExtractSelectors로 인해 타입 추론에 대한 블랙박스 Layer가 발생하고 어떻게 값들이 사용되는지 알기 어렵다는 것이다.

이번엔 DX를 고려하지 않고 직접 타입을 assertion해보자.

---

UX가 좋고 DX가 나쁜 Type assertion

export const useManager = <T extends AtomManager<any>>(manager: T) => {
  const selectors = Object.fromEntries(
    Object.entries(manager.selectors).map(([key, atom]) => [
      key,
      useAtomValue(atom),
    ])
  ) as {
    [P in keyof T['selectors']]: T['selectors'][P] extends Atom<infer V>
      ? V
      : never;
  };

  const actions = Object.fromEntries(
    Object.entries(manager.actions).map(([key, actionAtom]) => [
      key,
      useSetAtom(actionAtom),
    ])
  ) as {
    [P in keyof T['actions']]: T['actions'][P] extends WritableAtom<
      any,
      infer U,
      void
    >
      ? (param: U[0]) => void
      : never;
  };

  return { selectors, actions };
};

조금은 읽기 어려운 코드가 되었다.
하지만 사용자들이 보는 type 추론을 살펴보자.

(alias) useManager<Playlist>(manager: Playlist): {
    selectors: {
        playlist: Music[];
        currentMusic: Music;
    };
    actions: {
        add: (param: Music) => void;
        remove: (param: Music) => void;
        play: (param: number) => void;
        next: (param: undefined) => void;
        prev: (param: undefined) => void;
    };
}

깔끔해졌다. useManager에 hover할 경우, 한 눈에 어떤 selector와 actions를 사용할 수 있을지, 매개변수가 무엇인지 한 번에 알 수 있다.

당연히 이건 혼자 개발하는 라이브러리이기 때문에 후자를 택하여 배포하였다.

---

wrapping 함수에서 매개변수로 전달받은 객체의 타입을 동적으로 추론하여 return 값에서도 원본의 타입을 사용하는 것은 2달 전에도 시도했지만 드디어 첫 성공을 이루게 되었다. 🥳

주말이 통으로 사라졌지만 ReturnType이나 infer을 사용해 조금 더 TS를 유용하게 쓸 수 있었던 값진 시간이었다.

👍