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

前言

这一节我们学习一下typescript的类型推论，主要了解下自动推论可以帮助我们优化哪些代码。

类型推论

基础推断

• 在 Typescript 里，如果我们定义的变量，没有指定具体的类型，类型推论会自动推断类型，提供类型帮助。
• 比如我们定义一个变量

let x = 3

• 变量x会自动被推断为数字类型，当我们鼠标悬浮上去的时候，就可以看到类型提示。

最佳类型推断

• 当我们的变量，通过多个表达式计算得出的类型不一样，typeScript会通过这些表达式，推断出一个比较合适的通用类型
• 比如我们定义一个三元表达式

let bool = false;
let a = bool ? 10 : "20";

• 变量a的结果，是通过一个表达式得出的，a的类型就具有了不确定性，bool是true的时候，a是个数字，bool是false的时候，a是一个字符串，所有a就具有了这两种类型，鼠标悬浮到变量a上会如下图所示：

• 再举个例子：定义一个多类型的数组

let x = [0, 1, null];

• 为了推断x的类型，我们就需要考虑所有元素的类型，这里就推断出了number和null两种类型。

上下文类型

• typeScript也可以推断出一些原生事件的上下文类型，也就是回调中的事件类型
• 比如：

window.onmousedown = function (mouseEvent) {
  console.log(mouseEvent.button);
};

• 当我们鼠标悬浮在onmousedown上时，会发现传递的参数mouseEvent隐式具有 any类型，但实际上我们可以定义为 MouseEvent类型，这些都是原生定义的。

如果我们想指定事件回调参数类型，需要显式的标明：

window.onmousedown = function (mouseEvent:MouseEvent) {
  console.log(mouseEvent.button);
};

总结

• 通过这一节，我们可以了解到typescript中，如果我们没有给变量、函数、类等基础JavaScript代码定义类型的时候，会帮助我们进行对应的类型推断