这是我参与11月更文挑战的第24天, 活动详情查看:2021最后一次更文挑战
前言
前面更文通过学习 TS 的类型/枚举/函数/类/泛型等, 已经对 TS 有了初步的了解熟悉, 其中有和 JS 中并存的知识点, 也有相对 JS 没有的, 那本文来学习 TS 重要知识点 -- 类型推论
现在 TypeScript + Vue3
应用挺广了, 如果不学习总感觉跟不上大厂的节奏. 学习 TypeScript
(虽然觉得也是可选的,但还是要学,真卷...) 这里有记录学习 TypeScript
的过程, 收录在 TypeScript 实战专栏
Typescript 相关文档
Typescript 官网地址: typescriptlang.org/zh/
Typescript 中文文档:类型推论
TypeScript 类型推论 type-inference
本文来学习 TypeScript
里的 类型推论: 在有些没有明确指出类型的地方, 类型推论会帮助提供类型, 类型是在哪里如何被推断的。
栗子:
变量 xn
的类型被推断为数字。 这种推断发生在初始化变量和成员, 设置默认参数值和决定函数返回值时
let xn = 213
复制代码
推断出 最佳通用类型
let xarr = [0, 1, null]
复制代码
通过上面代码学习: 一个数组的各个元素的类型并不相同, 为了推断 xarr
的类型, 须考虑每个元素的类型, 这里有两种选择: number
和 null
即当需要从这几个表达式中推断类型时候, 会使用这些表达式的类型来推断出一个最合适的通用类型。
计算通用类型算法会考虑所有的候选类型, 并给出一个兼容所有候选类型的类型, 最终的通用类型取自候选类型
而有些时候候选类型共享相同的通用类型, 但是却没有一个类型能做为所有候选类型的类型。例如:
let fruits = [new Apple(), new Duixiang(), new Bear()]
复制代码
这里, 我们想让 fruits 被推断为 Fruit[]
类型, 但是这个数组里没有对象是 Fruit 类型的, 因此不能推断出这个结果。 为了更正, 当候选类型不能使用的时候我们需要明确的指出类型:
let fru: Fruit[] = [new Apple(), new Duixiang(), new Bear()]
复制代码
如果没有找到最佳通用类型的话, 类型推断的结果为联合数组类型, (Apple | Duixiang | Bear)[]
。
按上下文归类-上下文类型
TypeScript
类型推论 按上下文归类会发生在表达式的类型与所处的位置相关, 当然如果上下文中有明确的类型指定, 则类型推论-按上下文来进行的类型推论会被忽略.
如下面这个例子会得到一个类型错误, TypeScript 类型检查器
使用 Window.onmousedown
函数的类型来推断右边函数表达式的类型, 这样就能推断出 mouseEvent 参数的类型了。
window.onmousedown = function (mouseEvent) {
console.log(mouseEvent.button) ///--> Error
}
复制代码
/// 参数 指定了明确的类型: 这里不会使用到上下文类型。
window.onmousedown = function (mouseEvent: any) {
console.log(mouseEvent.button) ///--> no error
}
复制代码
上下文归类 的使用情况
通常包含:
- 函数的参数,
- 赋值表达式的右边,
- 类型断言, ----- [[将在下文进行学习总结]]
- 对象成员和数组字面量和返回值语句
上下文类型 与 最佳通用类型
上下文类型就是通过类型推论得来的, 也会做为最佳通用类型的候选类型:
/// 最佳通用类型有 4 个候选者:->> Fruit, Apple, Duixiang 和 Bear。 Fruit 会被做为最佳通用类型。
function fruits(): Fruit[] {
return [new Apple(), new Duixiang(), new Bear()]
}
复制代码
Vue3 学习实战系列更文:
- Vue3 源码学习-工具函数 utils(二)
- Vue3-初体验,
- Vue3-
生命周期
和setup()函数
, - Vue3-
computed & watch
, - Vue3-
Teleport
改变组件挂载的根节点, - Vue3-
Suspense
处理异步请求, - Vue3-
defAsyncComponent
异步组件(新增), - Vue3-
fragments
(新增), - Vue3-
v-model
(非兼容),
- Vue3 源码仓库
vue-next
: github.com/vuejs/vue-n… - Vue3.x 官方中文文档: v3.cn.vuejs.org