一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

TypeScript函数类型

在JavaScript开发中，函数是重要的组成部分，并且函数可以作为参数，也可以作为返回值进行传递。那么在使用函数的过程中，函数是否也可以有自己的类型呢？我们可以编写函数类型的表达式（Function Type Expressions），来表示函数类型；

type CalcFunc = (num1: number, num2: number) => vaid

function calc(fn: CalcFunc) {
    console.log(fn(1, 2))
}

function sum(num1: number, num2: number) {
    return num1 + num2
}

function mul(num1: number, num2: number) {
    return num1 * num2
}

calc(sum)
calc(mul)

TypeScript函数类型解析:

在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：接收两个参数的函数：num1和num2，并且都是number类型；并且这个函数是没有返回值的，所以是void；
在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的

参数的可选类型

我们可以指定某个参数是可选的：

function fn(x: number, y?: number) {
    console.log(x, y)
}

这个时候这个参数y的类型是 number | undefined，另外可选类型需要在必传参数的后面。

默认参数

从ES6开始，JavaScript是支持默认参数的，TypeScript也是支持默认参数的：

function fn(x: number, y: number = 6) {
    console.log(x, y)
}

剩余参数

从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

function sum(...nums: number[]) {
    let total = 0;
    for (const num of nums) {
      total += num
    }
    return total
}

const res1 = sum(1, 2, 3);
console.log(res1) // 6

const res2 = sum(1, 2, 3, 4);
console.log(res2) // 10

可推导的this类型

TypeScript是如何处理this呢？我们先来看一个例子：

const info = {
    name: "zhangsan",
    sayHello() {
      console.log(this.name)
    }
}

info.sayHello()

上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：TypeScript认为函数 sayHello 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。

但是对于某些情况来说，我们并不知道this到底是什么？

function sayHello() {
    console.log(this.name)
}
const info = {
    name: "zhangsan",
    sayHello
}

info.sayHello()

这段代码运行会报错的：TypeScript进行类型检测的目的是让我们的代码更加的安全；所以这里对于 sayHello 的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来调用函数；通常TypeScript会要求我们明确的指定this的类型：

type NameType = {
    name: string
}
function sayHello(this: NameType) {
    console.log(this.name)
}

ts语法（五）

TypeScript函数类型

参数的可选类型

默认参数

剩余参数

可推导的this类型