TypeScript函数类型解析

在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：

接收两个参数的函数：num1和num2，并且都是number类型；

并且这个函数是没有返回值的，所以是void；

在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的：

参数的可选类型

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

这个时候这个参数x依然是有类型的，它是什么类型呢？ number | undefined

// 可选类型是必须写在必选类型的后面的
// y -> undefined | number
function foo(x: number, y?: number) {

}

foo(20, 30)
foo(20)

默认参数

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

这个时候y的类型其实是 undefined 和 number 类型的联合。

// 必传参数 - 有默认值的参数 - 可选参数
function foo(y: number, x: number = 20) {
  console.log(x, y)
}

foo(30)

剩余参数

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

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

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

console.log(sum(20, 30))
console.log(sum(20, 30, 40))
console.log(sum(20, 30, 40, 50))

可推导的this类型

TypeScript是如何处理this呢？

const info = {
  name: "sabo",
  eating() {
    console.log(this.name + " eating")
  }
}

info.eating()

export {}

上面的代码是可以正常运行的，也就是TypeScript在编译时，认为我们的this是可以正确去使用的：

TypeScript认为函数 sayHello 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。

不确定的this类型

这段代码运行会报错的：

这里我们再次强调一下，TypeScript进行类型检测的目的是让我们的代码更加的安全；

所以这里对于 sayHello 的调用来说，我们虽然将其放到了info中，通过info去调用，this依然是指向info对象的；

但是对于TypeScript编译器来说，这个代码是非常不安全的，因为我们也有可能直接调用函数，或者通过别的对象来调用函数；

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第43天，点击查看活动详情

TypeScript语法（十五）