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

2023-08-23 0 1,448 百度已收录

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 类型推断#

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

ts

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

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

上下文类型推断

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

ts

typescript 类型注解-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 类型

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

总结

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 typescript typescript 类型注解-TypeScript 类型推断# https://www.wkzy.net/game/146485.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务