学习TypeScript-函数Function这是我参与11月更文挑战的第23天, 活动详情查看：2021最后一次更文挑

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

回顾前面学习记录: 学习了 TS 的枚举类型/interface 接口/Class 类, 简单本文继续来学习 TypeScript - 函数 Function

现在 TypeScript + Vue3 应用特别广, 如果不学习, 总感觉跟不上大厂的节奏. 学习 TypeScript(虽然觉得也是可选的,但还是要学,真卷...) 这里记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

Typescript 相关文档

Typescript 官网地址: typescriptlang.org/zh/

Typescript 中文文档-Function 函数

函数是接触最多的, 也是 JS 应用程序编程的基础, 通过函数来实现抽象层, 模拟类, 信息隐藏和模块等各种功能的逻辑实现

当然在 TypeScript 里, 虽然已经支持类, 命名空间和模块, 但函数仍然是主要的定义行为的地方. TypeScript 为 JS 函数添加了额外的功能, 让我们可以更容易地使用。

TypeScript 函数当然也必须可以创建 有名字的函数 和 匿名函数.

// Named function
function add(x, y) {
  return x + y
}

// Anonymous function
let myAdd = function (x, y) {
  return x + y
}

给函数添加上类型:

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

let add = (a: number, b: number) => a + b

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

我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript 能够根据返回语句自动推断出返回值类型

当一个函数的参数可能不存在, 没传参的时候，它的值就是 undefined。需要我们使用可选参数来定义: 在参数的后面加上 ? 即代表参数是可选的(可传可不传):

// 参数b 有 number 与 undefined 两种可能性存在
let add = (a: number, b?: number) => a + (b ? b : 213)

默认参数只需在传的参数后赋值即可:

let add = (a: number, b = 10) => a + b

剩余参数同与 JavaScript, 使用用 ... 来表示剩余参数，而剩余参数 rest 则是一个由 number 组成的数组:

/// 用 reduce 进行了累加求和。
let add = (a: number, ...rest: number[]) => rest.reduce((a, b) => a + b, a)