타입스크립트에서 함수 오버로딩, 프론트엔드에서 어떻게 쓸까?

[raymondanythings]

최근 멀티 패러다임 프로그래밍이라는 책을 공부하고 있어요.
내용 중 reduce를 함수 오버로딩을 통해 구현하는 부분을 보게 되었어요.

Array.prototype.reduce의 경우, initialValue는 optional 타입이에요.
이를 오버로딩을 통해 구현하면 다음과 같이 명시할 수 있어요.

function reduce<A, Acc>(
  f: (acc: Acc, a: A) => Acc,
  acc: Acc,
  iterable: Iterable<A>
): Acc;
function reduce<A, Acc>(f: (a: A, b: A) => Acc, iterable: Iterable<A>): Acc;
function reduce<A, Acc>(
  f: (a: Acc | A, b: A) => Acc,
  accOrIterable: Acc | Iterable<A>,
  iterable?: Iterable<A>
): Acc {

초기값에 따라 반환 타입을 정확하게 추론할 수 있어요.

프론트엔드에서 오버로딩, 어디에 쓸 수 있을까?

프론트엔드 개발을 하며 오버로딩을 직접 구현하는 경우가 있지 않았던 것 같아요.
그래서, 사용하게 된다면 어디에 쓸 수 있을지 고민해봤어요.

1. 이벤트 핸들러 - 여러가지 상황에 대응할 수 있는 핸들러를 만들 경우.

function handleChange(e: React.ChangeEvent<HTMLInputElement>): void;
function handleChange(e: React.ChangeEvent<HTMLSelectElement>): void;
function handleChange(e: React.ChangeEvent<any>) {
  console.log(e.target.value);
}

2. validation 함수

function validate(value: string): { ok: boolean; value: string };
function validate(value: number): { ok: boolean; value: number };
function validate(value: string | number) {
  if (typeof value === "string") return { ok: value.length > 0, value };
  return { ok: !Number.isNaN(value), value };
}

const v1 = validate("hello"); // { ok: boolean; value: string }
const v2 = validate(42);      // { ok: boolean; value: number }\

3. API 클라이언트 - parse타입에 따라 다른 결과를 얻어야 할 때.

function api<T>(url: string, opts: { parse: "json" }): Promise<T>;
function api(url: string, opts: { parse: "text" }): Promise<string>;
function api(url: string, opts: { parse: "blob" }): Promise<Blob>;
function api(url: string, opts: { parse: "json" | "text" | "blob" }) {
  return fetch(url).then(res => {
    if (opts.parse === "json") return res.json();
    if (opts.parse === "blob") return res.blob();
    return res.text();
  });
}

// 사용
const user = await api<{ id: number }>("/user", { parse: "json" });
const text = await api("/robots.txt", { parse: "text" });

함수 오버로딩은 타입 안전성과 직관성을 동시에 챙길 수 있는 강력한 기능인 것 같아요.
다만, 프론트엔드 개발에서는 실제 코드에서 자주 쓰이는 경우가 드물다는 점이 고민 포인트였습니다.

혹시 여러분은 프론트엔드 개발에서 함수 오버로딩을 잘 활용한 경험이 있으신가요?

[al-bur]

저도 활용만 해본 적있지 잘 활용했다고 생각한 사례는 아직 없네요... discriminated Union은 유용하게 사용하고 있습니다