typescript 类型注解-TypeScript 类型推断#

ts

let counter: number = 0;

同样typescript 类型注解,当您为函数参数提供参数时,TypeScript 会将参数的类型推断为默认值的类型。 例如:

ts

function setCounter(max=100) {
    // ...
}

在这种情况下,TypeScript 推断 max 参数是数字类型。

类似地,TypeScript 将下面的increment() 函数的返回类型推断为数字。

ts

function increment(counter: number) {
    return counter++;
}

它与以下效果相同:

ts

function increment(counter: number) : number {
    return counter++;
}

最佳通用类型算法

考虑以下形式参数:

ts

let items = [1, 2, 3, null];

为了推断 items 变量的类型,TypeScript 需要考虑链表中每个元素的类型。

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

在这些情况下,TypeScript 选择数字字段类型 (number[]) 作为最佳通用类型。

如果将字符串添加到 items 字段typescript 类型注解,TypeScript 将推断 items 的类型是数字和字符串的链接列表:(number|string)[]。

ts

let items = [0, 1, null, 'Hi'];

注解类型和注解术语_typescript 类型注解_注解类型古代汉语

当 TypeScript 找不到最佳泛型类型时,它会返回关联列表类型。 例如:

ts

let arr = [new Date(), new RegExp('d+')];

在这种情况下,TypeScript 推断 arr 的类型为 (RegExp | Date)[]。

上下文类型推断

TypeScript 使用变量的位置来推断它们的类型。 这种机制称为上下文类型。 例如:

ts

注解类型古代汉语_typescript 类型注解_注解类型和注解术语

document.addEventListener('click', function (event) {
    console.log(event.button); // 
});

在这种情况下,TypeScript 知道事件参数是 MouseEvent 的实例,因为它是单击事件。

但是,当您将单击事件更改为滚动事件时,TypeScript 会发出错误:

ts

document.addEventListener('scroll', function (event) {
    console.log(event.button); // compiler error
});

错误:

ts

Property 'button' does not exist on type 'Event'.(2339)

TypeScript 知道在这些情况下事件是 UIEvent 的实例,而不是 MouseEvent 。 而且 UIEvent 没有 Button 属性,因此 TypeScript 会抛出错误。

类型推断与类型注释

类型推断和类型注释的区别如下所示:

类型推断 类型推断 类型注释 类型注释

TypeScript 猜测类型

您明确告诉 TypeScript 类型

在实践中,您应该尽可能使用类型推断。 在以下情况下应该使用类型注释:

总结