关于typescript:实现TypeScript中的互斥类型

前言

有这样一个对象，它有两个属性：name与title，在赋值的时候这两个属性只有一个能呈现，例如：name 呈现的时候 title 就不能呈现，title 呈现的时候 name 就不能呈现。

此时，你会怎么用 TypeScript 来定义这个类型？本文将带大家实现一个互斥类型来解决这个问题，欢送各位感兴趣的开发者浏览本文。

前置常识

在实现之前，咱们须要先来理解几个根底的常识。

对象中多属性同类型的定义

有一个对象它蕴含 5 个可选属性a、b、c、d、e，他们的类型都为string，大多数人的定义形式应该如下所示：

type obj = {
  a?:string;
  b?:string;
  c?:string;
  d?:string;
  e?:string;
}

那么，有没有更好的形式呢😼，答案是有的，请看我的表演：

type obj = {[P in "a" | "b" | "c" | "d" | "e"]?: string };

never 类型

在 TypeScript 中它有一个非凡的类型never，它是所有类型的子类型，无奈再进行细分，也就意味着除了其自身没有类型能够再调配给它。

咱们举个例子来解释下上述话语，如下所示：

• 咱们定义了一个变量amazing，给其赋予了 never 类型。
• 咱们别离给它赋了不同类型的值，全副编译失败，因为它无奈再进行细分了。

let amazing: never;
amazing = 12;// 报错：amazing 是 never 类型不能调配给 number 类型
amazing = true;// 报错：amazing 是 never 类型不能调配给 boolean 类型
amazing = "真神奇";// 报错：amazing 是 never 类型不能调配给 string 类型
amazing = {};// 报错：amazing 是 never 类型不能调配给 {} 类型
amazing = [];// 报错：amazing 是 never 类型不能调配给 [] 类型

剔除联结类型中的属性

有一组联结类型 "a" | "b" | "c" | "d"，咱们想剔除属性 b 和 c，在 TS 中提供了一个名为Exclude 的函数，它能够用来做这件事，承受两个参数：

• UnionType 联结类型
• ExcludedMembers 须要进行剔除的属性

应用办法如下所示：

type P = Exclude<"a" | "b" | "c" | "d", "b" | "c"> // "a" | "d"

将对象中的所有属性转为联结类型

有一个对象它蕴含 2 个可选属性 name、title，咱们想把它转为联结类型name | title ，在 TS 中提供了一个名为keyof 的函数，他能够用来解决这个问题，应用办法如下所示：

type A =  {[P in "name" | "title"]?: string };

type UnionType = keyof A; // "name" | "title"

实现互斥类型

有了前置常识作为铺垫，接下来咱们就能够将其利用起来，定义一个互斥类型进去，解决文章结尾所讲述的问题。

接下来，咱们来梳理下实现思路：

• 实现一个排除类型，用于从 A 对象类型中剔除 B 对象类型中的属性，并将排除后的属性类型设为 never，失去一个新对象类型。
• 基于排除类型实现互斥类型，将 A、B 对象类型代入排除类型中，彼此将其排除，用或运算符将二者后果连贯。

聪慧的开发者可能曾经猜到原理了，没错，就是局部属性设为 never。🤓

实现代码

接下来，咱们来看下代码的实现，如下所示：

// 定义排除类型：将 U 从 T 中剔除, keyof 会取出 T 与 U 的所有键, 限定 P 的取值范畴为 T 中的所有键, 并将其类型设为 never
type Without<T, U> = {[P in Exclude<keyof T, keyof U>]?: never };

// 定义互斥类型，T 或 U 只有一个能呈现（相互剔除时，被剔除方必须存在）type XOR<T, U> = (Without<T, U> & U) | (Without<U, T> & T);

留神：为了类型的可复用性，咱们应用了泛型，对此不相熟的开发者请移步：TypeScript 中文网——泛型

测试用例

咱们将文章结尾所说的问题代入上述实现代码中，看一下它是否将其解决😌，如下所示：

// A 类型
type A = {name: string;};

// B 类型
type B = {title: string;};

// A 和 B 两种类型只有一个能呈现
type AOrB = XOR<A, B>;

// 传值测试
const AOrB1: AOrB = {name: "姓名"}; // 编译通过
const AOrB2: AOrB = {title: "题目"}; // 编译通过
const AOrB3: AOrB = {title: "题目", name: "姓名"}; // 报错: Type '{title: string; name: string;}' is not assignable to type 'AOrB'.
const AOrB4: AOrB = {name: "姓名", otherKey: ""}; // 报错：Type'{name: string; otherKey: string;}'is not assignable to type'AOrB'.

当两个属性同时呈现时，编辑器间接就抛出了类型谬误（咱们把排除后的所有属性的类型设为了 never，因而当你给其赋任何值时它都会报类型谬误），如下图所示：

用例拆解

有一部分开发者可能对上述测试用例比拟懵，把它们拆开都意识，因为前置常识里都讲了，然而写到一起就不意识了😹，没关系，那我就把它们都拆解进去吧，代码如下所示：

type AOB = ({name?: never} & {title: string;}) | ({title?: never} & {name: string;});

// 传值测试
const a: AOB = {name: "姓名"}; // 编译通过
const b: AOB = {title: "题目"}; // 编译通过
const c: AOB = {title: "题目", name: "姓名"}; // 报错
const d: AOB = {title: "题目", otherKey: ""}; // 报错

看到这里，可能还有一部分开发者没有了解，那就动起手来在编辑器里敲一敲，如果还没了解的话，就先把这篇文章珍藏，日后有工夫了，在拿进去学一学。

写在最初

至此，文章就分享结束了。

我是 神奇的程序员，一位前端开发工程师。

如果你对我感兴趣，请移步我的集体网站，进一步理解。

• 文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注😊
• 本文首发于神奇的程序员公众号，未经许可禁止转载💌