TypeScript类型学习实练-类型推论

这是我参与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 的类型, 须考虑每个元素的类型, 这里有两种选择: numbernull 即当需要从这几个表达式中推断类型时候, 会使用这些表达式的类型来推断出一个最合适的通用类型。

计算通用类型算法会考虑所有的候选类型, 并给出一个兼容所有候选类型的类型, 最终的通用类型取自候选类型

而有些时候候选类型共享相同的通用类型, 但是却没有一个类型能做为所有候选类型的类型。例如:

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 学习实战系列更文:

  1. Vue3 源码学习-工具函数 utils(二)
  2. Vue3-初体验,
  3. Vue3-生命周期setup()函数,
  4. Vue3-computed & watch,
  5. Vue3-Teleport 改变组件挂载的根节点,
  6. Vue3-Suspense 处理异步请求,
  7. Vue3-defAsyncComponent 异步组件(新增),
  8. Vue3-fragments (新增),
  9. Vue3-v-model (非兼容),
  1. TypeScript 系列:

Guess you like

Origin juejin.im/post/7034529000131624990