TypeScript函数重载讲解与实战

2023-07-0405:51:17编程语言入门到精通Comments1,158 views字数 1270阅读模式

不知道大家是否跟我一样，我在最初接触TypeScript函数重载时，我的第一想法是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

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

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

我觉得，上边的代码应该是可行的，TypeScript应该根据我同一个函数名和其参数的不同而编译出不同的映射。但是实际上，这会被报错文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

我直呼好鸡肋哦！！！😂文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

TypeScript中的函数重载

但是如果我们把函数重载结合TypeScript是一个类型系统这句话来体会，似乎就能理解了：TypeScript只管类型，才不管你实现呢😎文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

函数重载的优点

提高类型的可读性，可以动态根据传递参数的不同识别并提示给用户不同的传参类型和个数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

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

应用场景

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

作用

将逻辑相似但是参数不一致的函数进行合并，方便统一管理与维护文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

如何使用

示例一

如下，我们分别定义了三个function，它们分别接收x和y两个参数，并且它们的参数类型不同，在该示例中，传递数值得到的是运算结果，传递字符串得到的就是字符串的拼接结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

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"

示例二

示例一通过一个简单的例子让我们直观感受了一个函数重载的写法，但并不是一个生产可用的例子文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

在上一个例子中至少存在两个问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

1-第三个function定义中的参数x和参数y的ts类型为any文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

2-在代码中没有对不同的参数类型做校验和守卫文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ymba/49635.html

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;
}