重载允许函数(方法)接收不同类型或数量的参数时,做出不同的处理。
js本身作为动态脚本语言是支持重载的,typescript的重载更多的是类型系统的补全。

函数

function func(arg: number): number;
function func(arg: string): string;
function func(arg: number | string): number | string {
  if (typeof arg === "number") {
    return 0;
  }
  return "0";
}

lambda

lambda的重载需要通过定义 type 实现。

type TFunc = {
  (x: number): number;
  (x: number, y: string): string;
};

export const func: TFunc = (x: number, y = ""): any => {
  if (y) {
    return `optional: ${y}`;
  }

  return x;
};

方法

静态方法

class C {
  static method(arg: string): string;
  static method(): void;
  static method(arg?: string) {
    return arg;
  }
}

实例方法

class C {
  public handle(arg: string): string;
  public handle(arg: boolean): void;
  public handle(arg: string | boolean) {
    if (typeof arg === "string") {
      return arg;
    }
    return;
  }
}

React组件

普通函数

interface IInputSelectProps<T> {
  options: T[];
  getOptionsLabel?: (arg: T) => string;
  getOptionsValue?: (arg: T) => string;
}

export function InputSelect<T>(props: IInputSelectProps<T>): ReactElement;
export function InputSelect({
  options,
  getOptionsLabel = (arg) => arg,
  getOptionsValue = (arg) => arg,
}: IInputSelectProps<string>): ReactElement {
  return <div />;
}

<InputSelect
  options={[{ label: "1", value: "2" }]}
  getOptionsLabel={(arg) => arg.label}
  getOptionsValue={(arg) => arg.value}
/>

lambda

interface IInputSelectProps<T> {
  options: T[];
  getOptionsLabel?: (arg: T) => string;
  getOptionsValue?: (arg: T) => string;
}

type TInputSelect = {
  (props: IInputSelectProps<string>): ReactElement;
  <T>(props: IInputSelectProps<T>): ReactElement;
};

export const InputSelect: TInputSelect = ({
  options,
  getOptionsLabel = (arg) => arg,
  getOptionsValue = (arg) => arg,
}: IInputSelectProps<string>): ReactElement => {
  return <div />;
};

<InputSelect
  options={[{ label: "1", value: "2" }]}
  getOptionsLabel={(arg) => arg.label}
  getOptionsValue={(arg) => arg.value}
/>;