专栏首页全栈修仙之路TypeScript 交叉类型

TypeScript 交叉类型

一、简介

TypeScript 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

interface IPerson {
  id: string;
  age: number;
}

interface IWorker {
  companyId: string;
}

type IStaff = IPerson & IWorker;

const staff: IStaff = {
  id: 'E1006',
  age: 33,
  companyId: 'EXE'
};

console.dir(staff)

在上面示例中,我们首先为 IPerson 和 IWorker 类型定义了不同的成员,然后通过 & 运算符定义了 IStaff 交叉类型,所以该类型同时拥有 IPerson 和 IWorker 这两种类型的成员。那么现在问题来了,假设在合并多个类型的过程中,刚好出现某些类型存在相同的成员,但对应的类型又不一致,比如:

interface X {
  c: string;
  d: string;
}

interface Y {
  c: number;
  e: string
}

type XY = X & Y;
type YX = Y & X;

let p: XY;
let q: YX;

在上面的代码中,接口 X 和接口 Y 都含有一个相同的成员 c,但它们的类型不一致。对于这种情况,此时 XY 类型或 YX 类型中成员 c 的类型是不是可以是 stringnumber 类型呢?比如下面的例子:

p = { c: 6, d: "d", e: "e" };
q = { c: "c", d: "d", e: "e" };

为什么接口 X 和接口 Y 混入后,成员 c 的类型会变成 never 呢?这是因为混入后成员 c 的类型为 string & number,即成员 c 的类型既是 string 类型又是 number 类型。很明显这种类型是不存在的,所以混入后成员 c 的类型为 never

在上面示例中,刚好接口 X 和接口 Y 中内部成员 c 的类型都是基本数据类型,那么如果是非基本数据类型的话,又会是什么情形。我们来看个具体的例子:

interface D { d: boolean; }
interface E { e: string; }
interface F { f: number; }

interface A { x: D; }
interface B { x: E; }
interface C { x: F; }

type ABC = A & B & C;

let abc: ABC = {
    x: {
      d: true,
      e: 'semlinker',
      f: 666
    }
};

console.log('abc:', abc);

以上代码成功运行后,控制台会输出以下结果:

由上图可知,在混入多个类型时,若存在相同的成员,且成员类型为非基本数据类型,那么是可以成功合并。目前我们已经介绍了 TypeScript 交叉类型相关的知识,最后我们再来举一个实际的使用示例。

二、使用示例

在实际项目开发过程中,我们经常需要开发一些功能函数,为了保证函数的灵活性和可复用性,这些函数往往会定义一些输入参数,而这些参数根据是否必填,又可分为必填参数和可选参数。当必填参数和可选参数有大部分参数是相同的情况下,我们就可以利用 TypeScript 交叉类型来解决复用问题。好了,废话不多说,直接看个示例:

ArgBase 接口

export interface ArgBase<T> {
  name?: string;
  description?: string;
  hidden?: boolean;
  parse: ParseFn<T>;
  default?: T | (() => T);
  input?: string;
  options?: string[];
}

RequiredArg 接口

export type RequiredArg<T> = ArgBase<T> & {
  required: true;
  value: T;
}

OptionalArg 接口

export type OptionalArg<T> = ArgBase<T> & {
  required: false;
  value?: T;
}

顾名思义,ArgBase 接口是基础参数接口,它是 RequiredArg 和 OptionalArg 接口的公共部分。示例代码中,RequiredArg 和 OptionalArg 的差异就是 required 字段和与之对应的 value 值。通过交叉类型,可以让我们更好地进行代码复用,并方便地实现把多种类型叠加到一起成为一种新的类型。

三、参考资源

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 遇到这些 TS 问题你会头晕么?

    相信很多读者看到 let value: Fonum = 12; 这一行,TS 编译器并未提示任何错误会感到惊讶。很明显数字 12 并不是 Fonum 枚举的成员...

    阿宝哥
  • 在 TS 中如何减少重复代码

    相信有些读者已经听说过 DRY 原则,DRY 的全称是 —— Don’t Repeat Yourself ,是指编程过程中不写重复代码,将能够公共的部分抽象出来...

    阿宝哥
  • 了不起的 TypeScript 入门教程

    想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图:

    阿宝哥
  • 设计模式之适配器模式

    适配器就是一种适配中间件,它存在于不匹配的二者之间,用于连接二者,将不匹配变得匹配,简单点理解就是平常所见的转接头,转换器之类的存在。

    二十三年蝉
  • 深入理解设计模式六大原则

    万变不离其宗,不管是Java还是C++,凡是面向对象的编程语言,在设计上,尽管表现形式可能有所不同,但是其实质和所需遵守的原则都是一致的。本文便是带领读者去深入...

    王金龙
  • 转--从面向对象的角度看Go语言与Java语言的区别

    Go语言风格 GO语言是支持并发编程和内存垃圾回收的编译型静态类型语言,运行效率高,具有较强的可伸缩性(scalable)。它是为软件工程服务而进行的语言设计,...

    李海彬
  • 来自前端同学对后端童鞋的吐槽!@!#^$%

    去年的某个时候就想写一篇关于接口的吐槽,当时后端提出了接口方案对于我来说调用起来非常难受,但又说不上为什么,没有论点论据所以也就作罢。最近因为写全栈的缘故,团队...

    Java小咖秀
  • 有理有据:一篇来自前端同学对后端接口的吐槽!

    来源 | juejin.im/post/5cfbe8c7e51d4556da53d07f

    程序猿DD
  • 简单实现 C# 与 Javascript的兼容

    本文章介绍下自己这刚实现的一个c#与js交互的插件。需求来源于一次与朋友的讨论。主要对话如下: 朋友:最近我想模拟一些数据,来测试我现在写的接口,但手工编写这些...

    sam dragon
  • miniblink重新开更啦

    惭愧,很长时间没发文章了,其实miniblink自从上月起就一直在频繁更新了,但一直懒得写文章记录下来。

    龙泉寺扫地僧

扫码关注云+社区

领取腾讯云代金券