文档章节

TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions)

durban
 durban
发布于 09/21 09:39
字数 892
阅读 11
收藏 0

转发 TypeScript基础入门之高级类型的可辨识联合(Discriminated Unions)

高级类型

可辨识联合(Discriminated Unions)

你可以合并单例类型,联合类型,类型保护和类型别名来创建一个叫做 可辨识联合的高级模式,它也称做 标签联合或 代数数据类型。 可辨识联合在函数式编程很有用处。 一些语言会自动地为你辨识联合;而TypeScript则基于已有的JavaScript模式。 它具有3个要素:

1. 具有普通的单例类型属性— 可辨识的特征。
2. 一个类型别名包含了那些类型的联合— 联合。
3. 此属性上的类型保护。

interface Interface1 {
  kind: 'interface1',
  property1: number,
}

interface Interface2 {
  kind: 'interface2',
  property2: number,
  property3: number,
}

interface Interface3 {
  kind: 'interface3',
  property4: number,
  property5: number,
}

首先我们声明了将要联合的接口。 每个接口都有 kind属性但有不同的字符串字面量类型。 kind属性称做 可辨识的特征或 标签。 其它的属性则特定于各个接口。 注意,目前各个接口间是没有联系的。 下面我们把它们联合到一起:

type Type = Interface1 | Interface2 | Interface3;

现在我们使用可辨识联合:

function getType(i: Type) {
  switch (i.kind) {
    case "interface1":
      return i.property1 * i .property1;
    case "interface2":
      return i.property2 * i.property3;
    case "interface3":
      return i.property4 * i.property5;
  }
}

完整性检查

当没有涵盖所有可辨识联合的变化时,我们想让编译器可以通知我们。 比如,如果我们添加了Interface4到Type,我们同时还需要更新 area:

interface Interface4 {
  kind: 'interface4',
  property6: number,
}


type Type = Interface1 | Interface2 | Interface3 | Interface4;

function getType(i: Type) {
  switch (i.kind) {
    case "interface1":
      return i.property1 * i .property1;
    case "interface2":
      return i.property2 * i.property3;
    case "interface3":
      return i.property4 * i.property5;
  }
}


有两种方式可以实现。 首先是启用 --strictNullChecks并且指定一个返回值类型:

function getType(i: Type): number { // error: returns number | undefined
  switch (i.kind) {
    case "interface1":
      return i.property1 * i .property1;
    case "interface2":
      return i.property2 * i.property3;
    case "interface3":
      return i.property4 * i.property5;
  }
}

因为 switch没有包涵所有情况,所以TypeScript认为这个函数有时候会返回 undefined。 如果你明确地指定了返回值类型为 number,那么你会看到一个错误,因为实际上返回值的类型为 number | undefined。 然而,这种方法存在些微妙之处且 --strictNullChecks对旧代码支持不好。第二种方法使用 never类型,编译器用它来进行完整性检查:

function assertNever(x: never): never {
  throw new Error("Unexpected object: " + x);
}

function getType(i: Type): number { // error: returns number | undefined
  switch (i.kind) {
    case "interface1":
      return i.property1 * i .property1;
    case "interface2":
      return i.property2 * i.property3;
    case "interface3":
      return i.property4 * i.property5;
    default:
      return assertNever(i); // error here if there are missing cases
  }
}

这里, assertNever检查 s是否为 never类型—即为除去所有可能情况后剩下的类型。 如果你忘记了某个case,那么 s将具有一个真实的类型并且你会得到一个错误。 这种方式需要你定义一个额外的函数,但是在你忘记某个case的时候也更加明显。**Tips**
上面的代码是根据官网的逻辑写的,奇怪的是最后一步居然在编译的时候报错了。报错信息如下

$ tsc src/advanced_types_4.ts
src/advanced_types_4.ts:38:26 - error TS2345: Argument of type 'Interface4' is not assignable to parameter of type 'never'.

38       return assertNever(i); // error here if there are missing cases
                            ~

© 著作权归作者所有

共有 人打赏支持
durban
粉丝 98
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之高级类型的类型保护与区分类型

转发 TypeScript基础入门之高级类型的类型保护与区分类型 项目实践仓库 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。 后面自己在练习的时候可...

durban
09/15
0
0
你所不知道的 Typescript 与 Redux 类型优化

自从 诞生后,函数式编程在前端一直很热;去年7月, 发布 2.0,OOP 数据流框架也开始火热,社区更倾向于类型友好、没有 Redux 那么冗长烦琐的 Mobx 和 dob。 然而静态类型并没有绑定 OOP。随...

奇阳黑科技
07/18
0
0
TypeScript基础入门之Javascript文件类型检查(三)

转发 TypeScript基础入门之Javascript文件类型检查(三) 继续上篇文章【TypeScript基础入门之Javascript文件类型检查(二)】 支持JSDoc 下面的列表概述了使用JSDoc注释在JavaScript文件中提供类...

durban
10/31
0
0
TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript

Anders Hejlsberg: Introducing TypeScript https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分......

程序员诗人
2017/11/16
0
0
TypeScript基础入门之高级类型的可null类型

转发 TypeScript基础入门之高级类型的可null类型 高级类型 可null类型(Nullable Types) TypeScript具有两种特殊的类型,null和undefined,它们分别具有值null和undefined。 默认情况下,类...

durban
09/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
17
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
11
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部