typescript中的类型推论

使用 typescript 时，在一些定义中如果你没有明确识指定类型，编译器会自动推断出合适的类型，比如：

let str = 'hello'
str = 123 // error，不能将类型“123”分配给类型“string”

可以看到，定义变量 str 时并没有指定它的类型，而是直接赋值一个字符串，当再给它赋一个数值时就会报错。这里 typescript 就根据我们赋给 str 的值的类型，推断出我们的  str 的类型，是字符串类型，所以不可以将数值类型赋给它。

这个就是最基本的类型推论，根据右侧的值推断左侧变量的类型。

 

多类型联合

当我们定义一个数组或者元组这种包含多个元素的值的时候，多个元素可以有不同的类型，这时候 typescript 会将多个类型合并起来，组成一个联合类型，例如：

const arr = [1, 'a']
arr.push(false) // error，类型“false”的参数不能赋给类型“string | number”的参数

此时的 arr 的元素被推断为 string | number，也就是元素可以是 string 类型也可以是 number 类型，除此之外的类型是不可以的。再一个例子：

let value = Math.random() * 10 > 5 ? 123 : 'abc'
value = false // error，不能将类型“false”分配给类型“string | number”。

value 的值是随机的，但是只能是 string 或者 number，它的类型被推断出是 string | number，所以不能赋值 false。

 

上下文类型

前面讲的例子都是根据 = 符号右边值的类型，推断出左侧变量的类型。现在还有一种是根据左侧的类型推断右侧的类型，这就是上下文类型。官网的例子：

window.onmousedown = function(mouseEvent) {
  console.log(mouseEvent.button);  // error，mouseEvent 上不存在属性 button
};

表达式左侧是 window.onmousedown (鼠标按下时发生事件)，因此 TypeScript 会推断赋值表达式右侧函数的参数是事件对象，且是 MouseEvent。在回调函数中使用 mouseEvent 的时候，你可以访问鼠标事件对象的所有属性和方法，当访问不存在属性的时候，就会报错。