Typescript -- 函数重载

163 阅读3分钟

百度百科介绍的函数重载

重载函数是函数的一种特殊情况,为方便使用,C++允许在同一范围中声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数、类型或者顺序)必须不同,也就是说用同一个函数完成不同的功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。不能只有函数返回值类型不同

JavaScript的重载

在JavaScript中是没有函数重载的这个概念的。当遇到同名的函数时,会进行覆盖然后取最后一个函数的函数体

 function fn() {
    console.log('我是第一个函数')
  }
  function fn() {
    console.log('我是第二个函数')
  }
  function fn() {
    console.log('我是第三个函数')
  }
  fn() // 我是第三个函数

如果要使用JavaScript来实现的话,只能说在函数体中通过对参数的类型判断来模拟实现函数重载的特性

function fn(param) {
    if (typeof param === 'number') {
      console.log('数字类型')
    } else if (typeof param === 'string') {
      console.log('字符串类型')
    }
  }
  fn(123) // 数字类型
  fn('123') // 字符串类型

后来typescript的出现,让JavaScript能够具备了函数重载的功能

TypeScript的函数重载

ts的函数重载包括两块

  • 一个或者多个重载签名
  • 一个实现签名

函数签名:是由函数名称 + 函数参数 + 函数参数类型 + 返回值类型组成的

interface Message {
  id: number,
  name: string
}

// 重载签名
function getId(value: number): Message
function getId(value: string): Message[]

// 实现签名
function getId(value: number | string): Message | Message[] {
  if (typeof value === 'number') {
    return { id: 123123, name: 'lsl' }
  } else {
    return [{ id: 123123, name: 'lsl' }]
  }
}

getId('111')
getId(111)

TS的函数重载有几大特点

  1. 它是由一个实现签名 + 一个或者多个重载签名
  2. 实现签名永远在所有的重载签名后面定义,否则ts会报错
  3. 实现签名比重载签名多了一个函数体。重载签名是不能有函数体的
  4. 实现签名的函数体是给所有的重载签名使用的
  5. 当外部调用函数的时候,其实是根据参数的类型来调用不同的重载签名,然后重载签名调用实现签名的函数体进行使用
  6. 实现签名是不会被调用的,永远调用的是重载签名
  7. 实现签名的参数个数可以小于重载签名的参数个数,但是多出来的参数不可以在实现签名函数体使用,使用了就会报错

仅当函数的基本功能比较相近,但是需要使用不同形式的参数实现功能时才应该使用函数重载

函数重载的主要好处就是减少了重复定义功能相近的函数,减少对命名空间的污染