TypeScript 的类型推导 Type Inference

简介: TypeScript 的类型推导 Type Inference

官方链接


在 TypeScript 中,当没有显式类型注释时,有几个地方使用类型推断来提供类型信息。

比如 let a = 3;


a 被推导成 number 类型。


x 变量的类型被推断为数字。 这种推断发生在初始化变量和成员、设置参数默认值以及确定函数返回类型时。


在大多数情况下,类型推断很简单。 在以下部分中,我们将探讨如何推断类型的一些细微差别。


Best common type

当从多个表达式进行类型推断时,这些表达式的类型用于计算“最佳公共类型”。

let x = [0, 1, null];

 

let x: (number | null)[]

要推断上例中 x 的类型,我们必须考虑每个数组元素的类型。 这里我们给出了数组类型的两种选择:数字和空值。 最佳通用类型算法会考虑每个候选类型,并选择与所有其他候选类型兼容的类型。


因为必须从提供的候选类型中选择最好的公共类型,所以在某些情况下类型共享一个公共结构,但没有一种类型是所有候选类型的超类型。

let zoo = [new Rhino(), new Elephant(), new Snake()];

 

let zoo: (Rhino | Elephant | Snake)[]

基于上下文的类型推导 - Contextual Typing

在 TypeScript 的某些情况下,类型推断也适用于“另一个方向”。这被称为“上下文类型”。当表达式的类型由其位置隐含时,就会发生上下文类型化。例如:

window.onmousedown = function (mouseEvent) {

 console.log(mouseEvent.button); //<- OK

 console.log(mouseEvent.kangaroo); //<- Error!

};

在这里,TypeScript 类型检查器使用 Window.onmousedown 函数的类型来推断赋值右侧的函数表达式的类型。 当它这样做时,它能够推断 mouseEvent 参数的类型,该参数确实包含 button 属性,但不包含 kangaroo 属性。


TypeScript 足够智能,可以推断其他上下文中的类型:

window.onscroll = function (uiEvent) {

 console.log(uiEvent.button); //<- Error!

};

基于上述函数被分配给 Window.onscroll 的事实,TypeScript 知道 uiEvent 是一个 UIEvent,而不是像前面的例子那样的 MouseEvent。 UIEvent 对象不包含按钮属性,因此 TypeScript 会抛出错误。


如果此函数不在上下文类型位置,则该函数的参数将隐式具有类型 any,并且不会发出错误(除非您使用 --noImplicitAny 选项):

const handler = function (uiEvent) {

 console.log(uiEvent.button); //<- OK

};

我们还可以显式地为函数的参数提供类型信息以覆盖任何上下文类型:

window.onscroll = function (uiEvent: any) {

 console.log(uiEvent.button); //<- Now, no error is given

};

相关文章
|
2天前
|
JavaScript 前端开发 索引
TypeScript 的数组类型
TypeScript 的数组类型
13 1
|
13天前
|
JavaScript 前端开发 IDE
TypeScript中的声明文件(.d.ts):扩展类型系统
TypeScript的`.d.ts`声明文件为JS库提供类型信息,增强IDE支持,如自动完成和类型检查。通过声明合并,可在全局作用域定义类型。示例包括为`my-library`创建声明模块,导出函数和接口。声明文件通常存于`@types`或指定`typeRoots`。用于旧JS代码的类型注解,如`myGlobalObject`。学习更多,参阅TypeScript官方文档。分享你的TS声明文件经验!
|
23天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
32 2
|
2天前
|
JavaScript 安全
TypeScript(十一)泛型工具类型
TypeScript(十一)泛型工具类型
|
2天前
|
JavaScript 前端开发 编译器
TypeScript(五)类型别名及类型符号
TypeScript(五)类型别名及类型符号
|
2天前
|
JavaScript 前端开发
TypeScript(二)基本类型和特殊类型
TypeScript(二)基本类型和特殊类型
|
7天前
|
JavaScript 安全 开发者
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
Vue3 中更好地利用 TypeScript 的类型系统来提高代码质量
|
9天前
|
JavaScript 安全
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
9 0
|
9天前
|
JavaScript
TypeScript类型申明
TypeScript类型申明
6 0
|
17天前
|
JavaScript 安全 前端开发
TypeScript 基础学习笔记:interface 与 type 的异同
TypeScript 基础学习笔记:interface 与 type 的异同
17 0