TypeScript函数重载讲解与实战

不知道大家是否跟我一样，我在最初接触TypeScript函数重载时，我的第一想法是这样的：

function printPerson(name:string){
  console.log(name)
}

function printPerson(name:string,age:number){
  console.log(name,number)
}

我觉得，上边的代码应该是可行的，TypeScript应该根据我同一个函数名和其参数的不同而编译出不同的映射。但是实际上，这会被报错

我直呼好鸡肋哦！！！😂

TypeScript中的函数重载

但是如果我们把函数重载结合TypeScript是一个类型系统这句话来体会，似乎就能理解了：TypeScript只管类型，才不管你实现呢😎

函数重载的优点

提高类型的可读性，可以动态根据传递参数的不同识别并提示给用户不同的传参类型和个数

函数重载的应用场景与作用

应用场景

• web-localStorage-plus
• Pinia.defineStore
• React.createElement
• ...

作用

将逻辑相似但是参数不一致的函数进行合并，方便统一管理与维护

如何使用

示例一

如下，我们分别定义了三个function，它们分别接收x和y两个参数，并且它们的参数类型不同，在该示例中，传递数值得到的是运算结果，传递字符串得到的就是字符串的拼接结果

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: any, y: any): any {
  return x + y;
}

add(1, 2); // 3
add("hello", "world"); // "helloworld"

示例二

示例一通过一个简单的例子让我们直观感受了一个函数重载的写法，但并不是一个生产可用的例子

在上一个例子中至少存在两个问题：

1-第三个function定义中的参数x和参数y的ts类型为any

2-在代码中没有对不同的参数类型做校验和守卫

function add(x: number, y: number): number;
function add(x: string, y: string): string;
function add(x: number|string, y: number|string): number|string|undefined {
  if(typeof x === 'number' && === 'number'){
      return x + y + 1
  }
  if(typeof x === 'string' && === 'string'){
      return x + '-' + y
  }
  return undefined;
}

感兴趣的可以看我写的一个库，里边提供的9个api接口全部基于TypeScript函数重载实现：传送门

总结

学会TypeScript函数重载其实很简单，你只需要牢记两点即可：

• TypeScript是针对类型重载的
• 你需要在业务逻辑中对不同的类型参数做校验然后才能做逻辑处理，不推荐使用any大法