TypeScript 类型推断

摘要：在本教程中，您将了解 TypeScript 中的类型推断。

类型推断描述了 TypeScript 在您没有显式添加类型注解时，如何以及在哪里推断类型。

基本类型推断

声明变量时，您可以使用类型注解显式指定其类型。例如

let counter: number;Code language: JavaScript (javascript)

但是，如果您使用数字初始化 counter 变量，TypeScript 会将 counter 的类型推断为 number。例如

let counter = 0;Code language: JavaScript (javascript)

它等价于以下语句

let counter: number = 0;Code language: JavaScript (javascript)

同样，当您为函数参数赋值时，TypeScript 会将参数的类型推断为默认值的类型。例如

function setCounter(max=100) {
    // ...
}Code language: JavaScript (javascript)

在此示例中，TypeScript 将 max 参数的类型推断为 number。

类似地，TypeScript 将 increment() 函数的以下返回值类型推断为 number

function increment(counter: number) {
    return counter++;
}Code language: JavaScript (javascript)

它与以下代码相同

function increment(counter: number) : number {
    return counter++;
}Code language: JavaScript (javascript)

最佳通用类型算法

考虑以下赋值

let items = [1, 2, 3, null];Code language: JavaScript (javascript)

为了推断 items 变量的类型，TypeScript 需要考虑数组中每个元素的类型。

它使用最佳通用类型算法分析每个候选类型，并选择与所有其他候选类型兼容的类型。

在这种情况下，TypeScript 选择数字或 null 的数组类型（number | null) []）作为最佳通用类型。请注意，| 在类型中表示 OR 运算符。

如果您向 items 数组添加一个字符串，TypeScript 将推断 items 的类型为数字和字符串数组：(number | string)[]

let items = [1, 2, 3, 'Cheese'];Code language: JavaScript (javascript)

上下文类型

TypeScript 使用变量的位置来推断其类型。此机制称为上下文类型。例如

document.addEventListener('click', function (event) {
    console.log(event.button); 
});Code language: JavaScript (javascript)

在此示例中，由于 click 事件，TypeScript 知道 event 参数是 MouseEvent 的实例。

但是，当您将 click 事件更改为 scroll 事件时，TypeScript 将发出错误

document.addEventListener('scroll', function (event) {
    console.log(event.button); // compile error
});Code language: JavaScript (javascript)

错误

Property 'button' does not exist on type 'Event'.(2339)Code language: JavaScript (javascript)

TypeScript 知道在这种情况下，event 是 UIEvent 的实例，而不是 MouseEvent。而 UIEvent 没有 button 属性，因此 TypeScript 会抛出错误。

您将在许多情况下发现上下文类型，例如函数调用的参数、类型断言、对象的成员和数组字面量、返回语句以及赋值的右侧。

类型推断与类型注解

以下是类型推断和类型注解的区别

那么，什么时候使用类型推断和类型注解呢？

在实践中，您应该尽可能地多使用类型推断。在以下情况下，您使用类型注解

• 当您声明一个变量并在稍后为其赋值时。
• 当您需要一个无法推断的变量时。
• 当函数返回 any 类型时，您需要澄清其值。

总结

• 类型推断发生在您初始化变量、设置参数默认值以及确定函数返回值类型时。
• TypeScript 使用最佳通用类型算法来选择与所有变量兼容的最佳候选类型。
• TypeScript 还使用上下文类型根据变量的位置推断变量的类型。