Typescript——函数的重载

函数的重载

在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})