跳到主要内容

函数类型与重载

如何标注函数类型与参数？​

const sum = (x: number, y: number): number => {
  return x + y;
};
const buildName1 = (firstName: string, lastName?: string) => {};
const buildName2 = (firstName: string, lastName: string = "kong") => {};
const push = (array: any[], ...items: any[]) => {};
  • 参数: 逐个在参数名后标注类型, 返回值类型写在参数列表后;
  • 可选参数 ?: 必须位于必选参数之后;
  • 默认参数: 有默认值的参数可以省略实参;
  • 剩余参数 ...: 收集任意数量实参, 必须位于参数列表最后;

函数重载如何声明？​

  • 场景: 同一个函数接受不同数量或类型的参数, 并返回不同类型;
  • 写法: 先写若干只有签名的重载行, 最后写一个包含实现的重载行;
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string | void {
  if (typeof x === "number") {
    return Number(x.toString().split("").reverse().join(""));
  }
  if (typeof x === "string") {
    return x.split("").reverse().join("");
  }
}
  • 实现签名: 对外不可见, 调用时只按前面的重载签名匹配;
  • 匹配顺序: 自上而下取第一个满足的签名;

箭头函数如何表达重载？​

  • 限制: 箭头函数没有函数声明的重载语法;
  • 写法一: 用带调用签名的接口标注变量类型;
interface FN {
  (x: number): number;
  (x: number, y: number): number;
}

const reverse1: FN = (x: number, y?: number): number => {
  if (y) return x + y;
  return x;
};
  • 写法二: 用 as 断言把箭头函数断言为接口类型;
const reverse2 = ((x: number, y?: number): number => {
  if (y) return x + y;
  return x;
}) as FN;
  • 选择: 能用可读的重载签名时优先普通函数声明;