TypeScript学习实练-高级类型之联合类型

xn213
228 阅读3分钟

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

前言

前面更文通过学习 TS 的类型/枚举/函数/类/泛型等基础类型和特殊类型. 已经对 TS 有了初步的了解熟悉, 其中有和 JS 中并存的知识点, 也有相对 JS 没有的, 那本文来学习 TS 重要知识点 -- 高级类型2-联合类型

现在 TypeScript + Vue3 应用挺广了, 如果不学习总感觉跟不上大厂的节奏. 学习 TypeScript(虽然觉得也是可选的,但还是要学,真卷...) 这里有记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

Typescript 相关文档

Typescript 官网地址: typescriptlang.org/zh/ Typescript 中文文档：高级类型

TypeScript 高级类型

  1. 交叉类型（Intersection Types）
  2. 联合类型（Union Types）
  3. 枚举成员类型
  4. 可辨识联合（Discriminated Unions）
  5. 索引类型（Index types）

本文来学习 TypeScript里的 高级类型: 联合类型

2. 联合类型 （Union Types）

联合类型(|) 多少和上文的交叉类型(&)有点相似之处, 但在使用方法上完全不同.

联合类型: 比如说我们希望一个属性有多种类型: string 或 number , 这时候 联合类型(string | number)就排上用场了.

function uniontype(str: string, value: string | number) {
  ///... 这里的 value 即可以是 string 也有可能是 nummber 类型
}

使用联合类型表示一个值可以有几种类型之一, 用竖线（|）分隔每个类型: 比如: 类型 string | number | boolean 表示一个value 可以是 string、number、或boolean。

设置 any 的问题

如下示例函数: uniontype 存在一个问题, value 参数的类型指定成了 any 这就是说我们可以传入一个既不是 number也不是 string类型的参数, 但是由于给 value 设置了 any 类型, 这时候TypeScript却不报错, 这也是 不建议使用 any的原因之一了

function uniontype(str: string, value: any) {
  /// value
}
uniontype("str","str") // no error
uniontype("str", 213) // no error

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 系列:

avatar
文章
阅读
粉丝