定义一系列API函数的完整类型和匿名函数(图)

功能

函数是 JavaScript 应用程序的基础，可帮助您实现抽象层、模拟类、信息隐藏和模块。在 TypeScript 中，尽管已经支持类、命名空间和模块，但函数仍然是定义行为的主要场所。 TypeScript 为我们可以更轻松使用的 JavaScript 函数添加了额外的功能。

基本示例

与 JavaScript 一样，TypeScript 函数可以创建命名函数和匿名函数。您可以自由选择适合您的应用程序的方法，无论是定义一系列 API 函数还是只使用一次的函数。

// 命名函数
function add(x, y) {
  return x + y
}
// 匿名函数
let myAdd = function(x, y) { 
  return x + y;
}

函数类型为函数定义类型

让我们在上面的函数中添加一个类型：

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

我们可以为每个参数添加一个类型，然后为函数本身添加一个返回类型。 TypeScript 可以根据 return 语句自动推断返回值类型。

编写完整的函数类型

现在我们已经为函数分配了一个类型，让我们写出函数的完整类型。

// 函数的完整写法
// myAdd2---->变量名----函数myAdd2
//  (x: number, y: number) => number 是当前这个函数的类型
// function(x: number, y: number): number { return x + y } 相当于符合上面这个函数的值
let myAdd2: (x: number, y: number) => number = 
function(x: number, y: number): number {
  return x + y
}

可选参数和默认参数

TypeScript 中的每个函数参数都是必需的。这并不意味着您不能将 null 或 undefined 作为参数传递，它只是意味着编译器会检查用户是否为每个参数传递了一个值。编译器还假定只有这些参数将传递给函数。简而言之，传递给函数的参数数量必须与函数期望的参数数量相匹配。

在 JavaScript 中，每个参数都是可选的，可以传递也可以不传递。当没有传递参数时，它的值是未定义的。在 TypeScript 中，我们可以使用 ?参数名称旁边，实现可选参数的功能。例如，我们希望 lastName 是可选的

在 TypeScript 中，我们还可以在用户不传递参数或传递的值未定义时为参数提供默认值。它们被称为具有默认初始化值的参数。让我们修改上面的例子，将 firstName 的默认值设置为“A”。

function buildName(firstName: string='A', lastName?: string): string {
  if (lastName) {
    return firstName + '-' + lastName
  } else {
    return firstName
  }
}
// 都传入
console.log(buildName('C', 'D'))
// 只传入姓
console.log(buildName('C'))
// 什么也不传
console.log(buildName())

剩余参数

必需参数、默认参数和可选参数有一个共同点：它们代表某个参数。有时候，你想同时操作多个参数，或者你不知道会传入多少个参数。在 JavaScript 中，你可以使用 arguments 来访问所有传递的参数

在 TypeScript 中，您可以将所有参数收集到一个变量中：

其余参数将被视为无限数量的可选参数。不可能没有，也可能有。编译器使用省略号 ( … ) 后给出的名称创建一个参数数组，您可以在函数体中使用该数组。

function info(x: string, ...args: string[]) {
  console.log(x, args)
}
info('abc', 'c', 'b', 'a')

函数重载

函数重载：函数名相同但形参不同的多个函数

在JS中，由于弱类型的特点和形式参与的实际参数，不存在函数重载，但在TS中，这种语法与其他面向对象的语言（如Java）存在

/* 
函数重载: 函数名相同, 而形参不同的多个函数
需求: 我们有一个add函数，它可以接收2个string类型的参数进行拼接，也可以接收2个number类型的参数进行相加 
*/
// 重载函数声明
function add (x: string, y: string): string
function add (x: number, y: number): number
// 定义函数实现
function add(x: string | number, y: string | number): string | number {
    // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 x + y
    if (typeof x === 'string' && typeof y === 'string') {
        return x + y
    } else if (typeof x === 'number' && typeof y === 'number') {
        return x + y
    }
}
console.log(add(1, 2))
console.log(add('a', 'b'))