文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

实现TypeScript中的互斥类型

2024-12-02 03:32

关注

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

有一个对象它包含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,它是所有类型的子类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。

我们举个例子来解释下上述话语,如下所示:

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的函数,它可以用来做这件事,接受两个参数:

使用方法如下所示:

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" | "string"

实现互斥类型

有了前置知识作为铺垫,接下来我们就可以将其利用起来,定义一个互斥类型出来,解决文章开头所讲述的问题。

接下来,我们来梳理下实现思路:

聪明的开发者可能已经猜到原理了,没错,就是部分属性设为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中文网——泛型[1]

测试用例

我们将文章开头所说的问题代入上述实现代码中,看一下它能否将其解决😌,如下所示:

// 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: "" }; // 报错
来源:神奇的程序员内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯