TypeScript：函数类型

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

前言

函数是JavaScript应用程序的基础。

在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。

函数

具名函数

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里的每个函数参数都是必须的。 这不是指不能传递 null或undefined作为参数，而是说编译器检查用户是否为每个参数都传入了值。 编译器还会假设只有这些参数会被传递进函数。 简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

function add(x: string, y:string):string {
    return x + '-' + y;
}
let result1 = add('hello') // 报错参数缺少 Expected 2 arguments, but got 1.
let result2 = add('hello', 'hello', 'hello') // 报错参数过多 Expected 2 arguments, but got 3.

那如果我们只需要传入部分参数呢？

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

function add(x: string, y?:string):string {
    return y ?  `${x}-${y}` : x;
}
let result1 = add('hello') // hello
let result2 = add('hello', 'hello', 'hello') // 报错参数过多 Expected 2 arguments, but got 3.
let result3 = add('hello', 'world') // hello-world

可选参数必须跟在必须参数后面。 如果上例我们想让x是可选的，那么就必须调整它们的位置，把x放在后面。

默认参数

我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。 让我们修改上例，把y的默认值设置为 'world'。

function add(x: string, y = 'world'):string {
    return `${x}-${y}`;
}
let result1 = add('hello') // hello-world
let result2 = add('hello', 'JavaScript!') // hello-JavaScript!

当然默认参数也会有之前那样多传入参数的报错，和少传入参数的报错，具体需要看各种情况，你已经是一个成熟的程序员了，要懂得自己开脑洞了！

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。当然TypeScript中也允许我们这样进行操作啦！剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。当然我们在函数中也需要我们对剩余参数的类型进行定义。

function buildName(firstName: string, ...restOfName: string[]) { 
    return firstName + " " + restOfName.join(" "); 
}

this

学习如何在JavaScript里正确使用this就好比一场成年礼。 由于TypeScript是JavaScript的超集，TypeScript程序员也需要弄清 this工作机制并且当有bug的时候能够找出错误所在。 幸运的是，TypeScript能通知你错误地使用了 this的地方。

笑死！！！！当然这是因为开心，终于不用苦恼this指向了！

这里和大家到一个苦水，最近开发中很经常遇到有人害怕this指向没有调用正确就使用如下的方法

某个Vue文件中

  add(){
      const _this = this
      _this.a = _this.a + _this.b
  }

这种情况，我可以理解你当时的想法，但是我不理解你的写法！这样做没有任何的必要，首先这不是闭包，并没有及时的保存下这个this指向，其次也不是箭头函数，所以这样的写法非常没有必要，而且很容易造成开发的时候问题！希望看到的同学可以注意一下什么时候使用这种方法