TypeScript 팁: 조건부 유형을 사용하여 오버로드를 리팩터링합니다.

소개

며칠 전에 코드를 리팩토링하다가 다음과 같은 것을 발견했습니다.

interface IRawUser {
  first_name: string
  email: string,
  id: number,
}

interface User {
  name: string,
  email: string
  print: () => void
}

declare function userFactory(rawUser: IRawUser): User;

function mapRawToUserObject(rawShow: IRawUser[]): User[];
function mapRawToUserObject(rawShow: IRawUser): User;
function mapRawToUserObject(rawShow: IRawUser | IRawUser[]): User | User[] {
  if (rawShow instanceof Array) {
    return rawShow.map((raw) => userFactory(raw));
  }

  return userFactory(rawShow);
}

함수mapRawToUserObject는 오버로드를 사용하여 다음을 표현합니다. IRawUser[]의 배열로 호출하면 User[]의 배열을 반환하고 단일IRawUser로 호출하면 단일User을 반환합니다. ) .

너무 복잡하지는 않지만 메서드 정의를 리팩토링할 수 있는 좋은 기회인 것 같습니다.

조건부 유형 생성.

메서드가 받는 입력 유형을 결정해야 합니다.

살펴봐야 할 가능한 입력은 IRawUser 및 IRawUser[]입니다.

type MapRawResult<T extends IRawUser | IRawUser[]> = any;

그런 다음 조건부 논리를 추가합니다.

type MapRawResult<T extends IRawUser | IRawUser[]> = T extends IRawUser ? User : User[]

In plain words: If T is assignable to IRawUser return User otherwise return User[]

우리의 방법에 조건부 유형을 적용합니다.

지금 우리의 방법은 다음과 같습니다.

function mapRawToUserObject(rawShow: IRawUser[]): User[];
function mapRawToUserObject(rawShow: IRawUser): User;
function mapRawToUserObject(rawShow: IRawUser | IRawUser[]): User | User[] {
  // implementation
}

이제 오버로드를 제거하고 일반 매개변수( T extends IRawUser | IRawUser[] )를 추가하고 반환 유형을 최근에 만든 것으로 바꿀 수 있습니다.

type MapRawResult<T extends IRawUser | IRawUser[]> = T extends IRawUser ? User : User[]

function mapRawToUserObject<T extends IRawUser | IRawUser[]>(rawShow: T): MapRawResult<T> {
  // implementation
}

이 시점에서 typescript는 우리가 반환하는 값의 유형에 대해 불평할 것입니다.



컴파일러는 우리가 반환하는 값의 유형을 유추할 수 없습니다. 이에 대한 해결책은 키워드 as 를 사용하여 예상되는 유형을 명시적으로 표현하는 것입니다.

최종 방법은 다음과 같습니다.

function mapRawToUserObject<T extends IRawUser | IRawUser[]>(rawShow: T): MapRawResult<T> {
  if (rawShow instanceof Array) {
    return rawShow.map((raw) => userFactory(raw)) as MapRawResult<T>
  }

  return userFactory(rawShow) as MapRawResult<T>
}

결론

일부 값으로 시도하면 메서드가 오버로드를 사용하지 않고 이전과 동일하게 동작하는 방식을 볼 수 있습니다.





보너스로 IRawUser | IRawUser[]에 대한 유형 별칭을 사용하고 코드를 더 깔끔하게 만들 수 있습니다.

type MapRawArg = IRawUser | IRawUser[];

type MapRawResult<T extends MapRawArg> = T extends IRawUser ? User : User[];
function mapRawToUserObject<T extends MapRawArg>(rawShow: T): MapRawResult<T> {
  // ...
}

추가 자료

Conditional Types

Type Assertions

Generics

TypeScript Playground