[TS] 타입스크립트 두 종류의 키(key) 타입을 받을 때 객체 접근하기

문제 상황

---

아래와 같은 타입이 있다고 가정해보자.

export type OrderStatus = 'pending' | 'new' | '...생략';
export type Client = { user_id: number; company_name: string };

export type OrderFilterParams = {
  status: Array<OrderStatus>;
  client: Array<Client>;
  // ...생략
};

 

ClientAndOrderFilter 컴포넌트에선 "status" | "client" 두 종류의 타입을 받아 params[type] 형태로 OrderFilterParams 객체에 접근해서 값을 변경해야 하는 상황이다. 

interface ClientAndOrderFilterProps {
  setParams: Dispatch<SetStateAction<OrderFilterParams>>;
  params: OrderFilterParams;
  type: 'status' | 'client';
  // ...
}

 

하지만 ClientAndOrderFilter 컴포넌트에서 어떤 종류의 type("status" | "client")을 받을지 타입스크립트는 알 수 없기 때문에 params[type] 형태로 접근하면 타입 추론이 이뤄지지 않아 에러가 발생하고 있다. 

 

해결 방안

---

아래처럼 식별자 영역에선 type("status" | "client") Prop 타입으로 T의 제약 조건을 지정하고, 구현부에선 T 타입에 따라 다른 값을 반환하는 조건부 타입(OrderStatus[] | Client[])을 사용하면 문제를 해결할 수 있다. 

// 변경 전 (각 key에 할당될 값을 고정하지 않았으므로 수정 필요)
export type OrderFilterParams = {
  [key in OrderFilterType]?: Array<OrderStatus | ISODateString | ClinicLabType>;
};

// 변경 후
export type OrderFilterParams = {
  status: Array<OrderStatus>;
  client: Array<Client>;
  startdate: Array<ISODateString>;
  enddate: Array<ISODateString>;
};

export type ListType = 'status' | 'client';

// OrderStatus[] / Client[] 2가지 종류의 배열을 받으므로 제네릭 사용해서 타입 가드
// <T = ListType> 부분은 타입 식별자. "status" | "client"를 T의 기본값으로 지정
// Array<T extends ...> 부분은 타입 구현부. T를 "status"로 받으면 OrderStatus[] 타입을 리턴하고 그 외엔 Client[] 타입 리턴
export type ListFilter<T = ListType> = Array<
  T extends 'status' ? OrderStatus : Client
>;

 

이제 params[type]의 타입을 ListFilter<typeof type>으로 지정하면 타입 에러가 해결된다. ✨

const clickHandler = (status: ListFilterStatus) => {
  setParams((prevParams) => {
    const params: ListFilter<typeof type> = prevParams[type];
    // ...
    return {
      ...prevParams,
      [type]: params.filter((param) => {
        /* ... */
      }),
    };
  });
};

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요