前言
有这样一个对象,它有两个属性: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: ""}; // 报错
看到这里,可能还有一部分开发者没有了解,那就动起手来在编辑器里敲一敲,如果还没了解的话,就先把这篇文章珍藏,日后有工夫了,在拿进去学一学。
写在最初
至此,文章就分享结束了。
我是 神奇的程序员,一位前端开发工程师。
如果你对我感兴趣,请移步我的集体网站,进一步理解。
- 文中如有谬误,欢送在评论区斧正,如果这篇文章帮到了你,欢送点赞和关注😊
- 本文首发于神奇的程序员公众号,未经许可禁止转载💌