Typescript——函数的重载

最新推荐文章于 2024-08-03 10:00:21 发布

秃头的科比

最新推荐文章于 2024-08-03 10:00:21 发布

阅读量1.5k

点赞数 1

分类专栏： Typescript 文章标签： typescript

本文链接：https://blog.csdn.net/weixin_43933771/article/details/119001042

版权

Typescript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文探讨了在TypeScript中如何实现函数的重载，以解决联合类型带来的逻辑判断复杂性和不确定的返回值类型问题。通过创建多个重载函数定义，然后提供一个通用的实现函数，确保类型安全。示例中展示了如何为`add`函数创建重载，分别处理数字和字符串的相加，避免了类型错误。同时，强调了实现函数不能直接调用的规则。

摘要由CSDN通过智能技术生成

函数的重载

在TypeScript中，如果我们编写了一个add函数，希望可以对字符串和数字类型进行相加，我们可能会使用联合类型来编写，但是使用联合类型会有两个缺点：

（1）需要进行很多的逻辑判断（即上面说过的类型缩小）

（2）返回值的类型依然不能确定。

function add(a1: number | string, a2: number | string) {
  if (typeof a1 === "number" && typeof a2 === "number") {
    return a1 + a2
  } else if (typeof a1 === "string" && typeof a2 === "string") {
    return a1.length + a2.length
  }
}

add(10, 20) //报错（因为无法确定返回值的具体类型）

（首先明确一下：函数的重载是函数的名称相同，但是参数类型不同的几个函数，而这就是函数的重载）在TypeScript中，我们一般会去编写两个或者以上的重载函数，再去编写一个通用的函数以及实现（但是注意：是不能直接调用实现的通用函数）

//第一步：创建2个重载函数
function add(num1: number, num2: number): number; 
function add(num1: string, num2: string): string;

//第二步：编写通用函数以及实现
function add(num1: any, num2: any): any {
  //在这里我们可以进行进一步的判断
  if (typeof num1 === 'string' && typeof num2 === 'string') {
    return num1.length + num2.length
  }
  return num1 + num2
}

const result = add(20, 30)
const result2 = add("abc", "cba")
console.log(result) //50
console.log(result2) //6

// 在函数的重载中, 实现函数是不能直接被调用的
// add({name: "why"}, {age: 18})