# 函数

和 JavaScript 一样,TypeScript 函数可以创建有名字的函数或匿名函数,TypeScript 为 JavaScript 函数添加了额外的功能,让我们可以更容易的使用它。

在基本类型和接口部分中多多少少提到过函数,接下来总结四种定义函数的方式。

function add (x: number, y: number) {
  return x + y
}

const add: (x: number, y: number) => number

type add = (x: number, y: number) => number

interface add {
  (x: number, y: number) => number
}

TypeScript 里的每个函数参数都是必要的。这里不是指不能把 nullundefined 当做参数,而是说编译器检查用户是否为每个参数都传入了值。也就是说,传递给一个函数的参数个数必须与函数期望的参数个数保持一致。我们举个例子:

function add (x: number, y: number, z: number) {
  return x + y
}

add(1, 2) // Error: Expected 3 arguments, but got 2.

在上述例子中,函数定义了3个参数,分别为 xyz,结果返回 xy 的和。并没有使用参数 z,调用 add 只传入 xy 的值。这时 TypeScript 检查机制提示预期为三个参数,但实际只传入两个参数的错误。如何避免这种情况呢?

# 可选参数

在 TypeScript 里我们可以在参数名旁使用 ? 实现可选参数的功能。

function add (x: number, y: number, z?: number) {
  return x + y
}

add(1, 2)

经过修改,参数 z 变为可选参数,检查通过。

WARNING

可选参数必须在必选参数之后

# 默认参数

与 JavaScript 相同,在 TypeScript 里函数参数同样可以设置默认值,用法一致。

function add (x: number, y = 2) {
  return x + y
}

根据类型推断机制,参数 y 为推断为 number 类型。

# 剩余参数

与 JavaScript 相同。TypeScript 可以把所有参数收集到一个变量里。

function add (x: number, ...rest: number[]) {
  return x + rest.reduce((prev, curr) => prev + curr)
}

add(1, 2, 3) // 6

WARNING

剩余参数必须在必选参数之后,可选参数不允许和剩余参数共同出现在一个函数内。

# 函数重载

TypeScript 的函数重载,要求我们先定义一系列名称相同的函数声明。

function add (...rest: number[]): number
function add (...rest: string[]): string
function add (...rest: any[]): any {
  let first = rest[0]
  let type = typeof first
  switch (type) {
    case 'number':
      return rest.reduce((prev, curr) => prev + curr)
    case 'string':
      return rest.join('')
  }
  return null
}

上面例子中,我们定义了三个相同名称的函数,参数分别为 numberstringany 类型数组,相继返回的类型与参数类型相同。当调用该函数时,TypeScript 编译器能够选择正确的类型检查。在重载列表里,会从第一个函数开始检查,从上而下,所以我们使用函数重载时,应该把最容易用到的类型放在最上面。

WARNING

any 类型函数不是重载列表的一部分

Last Updated: 10/13/2019, 12:07:46 PM