这一次，彻底掌握TypeScript（四）函数

开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

这是我彻底掌握 TypeScript 的第四篇，这次我们主要分享 TypeScript 中的函数，点击下面链接可以查看之前文章。

往期文章：

这一次，彻底掌握TypeScript（一）基本类型&语法

这一次，彻底掌握TypeScript（二）接口与类

这一次，彻底掌握TypeScript（三）断言与类型别名

众所周知函数是 JavaScript 中的一等公民，其在 JavaScript 中扮演着举足轻重的角色，在 JavaScript 中我们可以使用箭头函数、function 关键字来创建一个函数，那么 TypeScript 中的函数又是怎样的呢？迭代器函数、生成器函数在 TypeScript 中又是如何定义的？

一、TypeScript 中函数与 JavaScript 中的区别

二、函数的定义

TypeScript 中函数的定义方式有如下几种：

// 函数类型的定义及实现
function add1(x: number, y: number) {
  return x + y;
}

// 通过变量名定义函数类型，后需指定具体实现
let add2: (x: number, y: number) => number; // 无法描述函数重载

// 通过类型别名定义函数类型，后需指定具体实现
type add3 = (x: number, y: number) => number; // 无法描述函数重载
type add4 = {
  (x: number, y: number): number
}

// 通过接口定义函数类型，后需指定具体实现
interface add5 {
  (x: number, y: number): number;
}

// 函数构造方法
let greet5 = new Function('name', 'return "hello " + name')

但需要注意函数构造方法并不被推荐，当我们用这种方式编写函数实例我们发现其类型为 Function，具体表现为一个可调用对象，具有 Function.prototype 的所有原型方法。但是这里并没有体现出参数和返回值的类型，因此可以使用任何参数类型调用函数，因此并不是类型安全的。

三、可选参数与默认参数

// 可选参数
function createUserId(name: string, id: number, age?: number): string {
  return name + id;
}

// 默认参数
function createUserId(
  name: string = "semlinker",
  id: number,
  age?: number
): string {
  return name + id;
}

此处需要注意的是可选参数要放在普通参数的后面，不然会导致编译错误。

四、剩余参数

function push(array, ...items) {
  items.forEach(function (item) {
    array.push(item);
  });
}

let a = [];
push(a, 1, 2, 3);

一个函数最多只能有一个剩余参数，而且必须位于参数列表的最后。

五、注解 this 的类型

TypeScript 支持通过在函数的第一个参数中声明 this 类型的方式对 this 的使用符合预期，举个