浅谈TypeScript中的函数重载

简介

引用维基百科对函数重载的定义

函数重载（英语：function overloading）或方法重载，是某些编程语言（如 C++、C#、Java、Swift、Kotlin 等）具有的一项特性，该特性允许创建多个具有不同实现的同名函数。对重载函数的调用会运行其适用于调用上下文的具体实现，即允许一个函数调用根据上下文执行不同的任务。

TypeScript中的重载

与上述对函数重载的定义在形式上有略微的不同，TypeScript中的函数重载只会有一个函数实现，但会有多个函数声明。我认为这得益于TypeScript的类型系统，可以通过内联类型任意组装类型，达到定义一个函数能够接收不同类型的参数和返回不同的值的效果，而不是通过多次定义函数来解决参数类型和返回值类型的问题。下面拿C++代码和TypeScript代码对比下差异。

// C++

string add(string x, string y) {
    return x + ',' + y
}

int add(int x, int y) {
    return x + y
}

可以发现C++代码使用函数重载是通过多次定义的方式来实现的，每次定义函数的参数类型或者是返回值类型都不尽相同，每种定义会根据传参类型和返回值类型来进行匹配，匹配上的函数定义将会被执行

// TypeScript

// 声明
function add(x: string, y: string): string;
function add(x: number, y: number): number;

// 实现
function add(x: string | number, y: string | number): string | number {
  if (typeof x === "string" && typeof y === "string") {
    return x + ',' + y
  } else {
    return x + y
  }
}

而TypeScript是利用一个函数实现来实现对add函数的重载，函数实现对声明的两种情况做了类型兼容，然后在实现里边分别处理各种情况，针对每种情况做单独的处理，这就是TypeScript中函数重载的使用.

如果我们需要重载的函数过多，那么需要支持的参数类型和函数返回值类型都会变得复杂，对每个类型的去兼容比较费力，比较省力的办法可以使用any限定参数类型和返回类型，内部的实现依旧不变

// 声明
function add(x: string, y: string): string;
function add(x?: number, y?: number): number;

// 实现
function add(x: any, y: any): any {
  if (typeof x === "string" && typeof y === "string") {
    return `${x},${y}`
  } else {
    return x + y
  }
}