TypeScript 中的并集和交集类型

TypeScript 的联合类型和交集类型详解

typescript 是 javascript 的超集,引入了强大的类型系统,增强了代码的可读性和可维护性。联合类型和交集类型是 typescript 类型系统中重要的组成部分,它们允许我们创建更灵活和精确的类型定义。本文将深入探讨这两个类型,并通过一个示例演示如何结合使用它们。

案例研究:构建 Person 类型

考虑一个场景:根据性别,某些信息是“不该问”的。 我们希望在 TypeScript 中创建一个 Person 类型来反映这种约束。

TypeScript 中的并集和交集类型 (图片链接: https://www.php.cn/link/3f1d00695d5aac23f5c556054b88be47)

下表总结了“不该问”的信息:

不该问 1 不该问 2 应该问 1 应该问 2

男薪水关系地址全名女年龄体重地址全名

如果只使用简单的联合类型,例如:

type Person = {    gender: 'man' | 'woman',    dontAsk: 'salary' | 'relationship' | 'age' | 'weight'};

那么 const person1: Person = { gender: 'man', dontAsk: 'weight' }; 这样的代码不会报错,这与我们的预期不符。

联合类型 (Union Type)

联合类型允许一个变量拥有多种类型中的一种。例如:

type ManDontAsk = 'salary' | 'relationship';type WomanDontAsk = 'age' | 'weight';

这定义了男性和女性“不该问”的信息类型。

交集类型 (Intersection Type)

交集类型将多种类型组合成一种新的类型,该类型的变量必须同时满足所有组成类型的要求。例如,所有的人都应该有地址和全名:

type CommonPerson = {    address?: string,    fullName: string};

组合联合类型和交集类型

现在,我们可以结合联合类型和交集类型来创建精确的 Person 类型:

type Person = ({    gender: 'man',    dontAsk: ManDontAsk} | {    gender: 'woman',    dontAsk: WomanDontAsk}) & CommonPerson;

这个类型定义确保:

Person 必须是男性或女性。根据性别,dontAsk 属性的类型不同。Person 必须包含 address(可选)和 fullName(必填)属性。

有效的 Person 对象示例:

const person1: Person = {    gender: 'man',    dontAsk: 'salary',    fullName: 'John Doe'};const person2: Person = {    gender: 'woman',    dontAsk: 'weight',    fullName: 'Jane Doe',    address: '123 Main St'};

无效的 Person 对象示例 (TypeScript 编译器会报错):

const person3: Person = { // 错误:性别为男,但dontAsk为age    gender: 'man',    dontAsk: 'age',    fullName: 'Jane Doe',};

总结

联合类型和交集类型是 TypeScript 类型系统中的强大工具,它们允许我们创建灵活且精确的类型定义,从而提高代码的可读性和可维护性。 通过巧妙地结合使用这两种类型,我们可以更有效地表达复杂的类型关系,并尽早发现类型错误。 这对于大型项目和团队协作至关重要。

以上就是TypeScript 中的并集和交集类型的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1500340.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 22:32:21
下一篇 2025年12月19日 22:32:30

相关推荐

  • 我如何在一天内构建我的应用程序代码库

    the coders bakery: a game-changer for software developers As a software developer, I’m constantly seeking tools to streamline workflows and boos…

    2025年12月19日 好文分享
    000
  • 如何使用 Web Workers 在 React 中运行异步任务

    在使用 React 开发应用时,经常会遇到需要执行耗时任务的情况,例如轮询 API 获取后台进程状态。如果不妥善处理,可能会导致应用卡顿甚至崩溃。Web Workers 提供了一种优雅的解决方案,它允许在后台线程中执行这些任务,从而避免阻塞主线程。 本文将通过一个监控后端报告生成状态的示例,讲解如何…

    2025年12月19日
    000
  • 在单个项目中使用包的多个版本:原因和方式

    大型 JavaScript 项目的依赖管理常常面临挑战。一种非传统但有效的策略是在单个项目中并行使用同一包的不同版本。这在处理遗留系统、实现特性切换或进行 A/B 测试时尤其有用。本文将深入探讨这种方法的理由,并重点介绍特性切换和 A/B 测试场景,以及 Bit 如何简化此过程。 为何需要同一包的多…

    2025年12月19日
    000
  • 为什么专注如此重要?

    在快节奏的数字时代,程序员能否保持专注直接影响着代码质量、项目进度和错误率。 高效专注,才能在开发过程中游刃有余。本文将分享一些实用技巧,助您提升编程专注力,高效完成任务。 专注力为何如此重要? 专注力是程序员的核心竞争力。编码需要高度集中,处理细节、逻辑和问题,稍一分神就可能导致错误百出,返工耗时…

    2025年12月19日
    000
  • 深入探讨异步:微任务、宏任务和事件循环

    JavaScript的异步特性,在深入了解其底层机制前,可能显得神秘莫测。其核心在于事件循环 (Event Loop),它协调着两个关键角色:微任务 (Microtask) 和宏任务 (Macrotask)。本文将深入探讨它们的概念、运作机制以及实际应用,帮助您掌握JavaScript异步编程的精髓…

    2025年12月19日
    000
  • 使用 Nestjs 设计 RBAC 权限系统:分步指南

    构建基于角色的访问控制 (RBAC) 系统:NestJS 实现 后端管理系统需要强大的访问控制和个性化界面。例如,超级管理员拥有所有权限,普通用户只能访问部分页面,VIP 用户则拥有更多权限。这需要一个基于用户、角色和权限的访问控制系统。 核心概念: 用户: 系统的基本单位,例如 Alice、Bob…

    2025年12月19日 好文分享
    000
  • 最佳 JavaScript 框架 Nextjs 与 Laravel、新的开发人员工具等

    JavaScript 开发者们,大家好! 欢迎阅读本周 JavaScript 最新动态! 2025 年伊始,令人振奋的趋势正在涌现,包括技术栈的演变、Laravel 与 Next.js 的竞争,以及一些能提升开发效率的便捷新工具。 JavaScript 技术栈的新变化 2025 年,在 AI 辅助开…

    2025年12月19日
    000
  • 使用 Bicep 自动连接逻辑应用程序到 Dynamics

    自动化正在革新开发者集成应用和服务的方式。Bicep 模板提供了一种强大的解决方案,简化了 Azure 逻辑应用和 Dynamics 365 之间的连接设置流程,从而节省时间、减少错误并增强可扩展性。 本文将探讨如何利用 Bicep 自动化 Azure 逻辑应用与 Dynamics 365 的连接,…

    2025年12月19日
    000
  • 使用 NgRx 的 signalMethod 增强 Angular 的副作用

    NgRx 一直是 Angular 应用状态管理的可靠库。随着 Signals API 的问世,开发者可以使用更简洁的方式处理状态变更和副作用。为处理这些副作用,NgRx 团队近期推出了 signalMethod,它简化了响应式工作流程,使其更直观易用。 本文将深入探讨 signalMethod,通过…

    2025年12月19日
    000
  • My oding Streak 日:Lyra 取得重大进展

    2025年伊始,我的编程之旅便以令人振奋的进展开启!今天是连续编码的第二天,我已在过去三个月潜心开发的项目上取得重大突破。回顾2024年,那是我学习的丰收之年;而2025年,我的目标是创造出真正有影响力、切实有用的软件。 阶段性成果 新年第一天,我攻克了项目前端的重大难题,这让我感觉很棒!而今天,我…

    2025年12月19日
    000
  • 搜有红包提现不到账怎么办-搜有红包提现不到账解决方法

    搜有红包提现不到账怎么办,用户可通过绑定账号、检查活动时间和提现门槛等方式进行排查,由于很多小伙伴不知道具体怎么解决,下面小编将为大家详细介绍一下,感兴趣的赶紧来看看吧。 搜有红包提现不到账怎么办 1、提现门槛:检查账户金额是否达到体验门槛,若没有到达可继续完成任务或切换小金额档位。 2、活动时间:…

    2025年12月19日
    000
  • 我如何决定在 Tailwind CSS 中使用 Flex 还是 Grid?

    在 Tailwind CSS 项目中,选择 Flexbox 还是 Grid 布局至关重要。两者都是强大的响应式设计工具,但应用场景不同。本文将深入探讨两者差异,助您做出最佳选择。 Flexbox:一维布局利器 Flexbox 擅长处理单轴(水平或垂直)布局。它在项目排列、空间分配和容器内对齐方面表现…

    2025年12月19日
    000
  • Github 样板列表

    以下是一些精选的Github项目模板,涵盖多种前端和全栈技术栈,助您快速启动新项目: 1. React 项目模板 仓库: React 项目模板 推荐理由: 一个维护良好、生产可用的React项目基础模板。 2. Next.js 项目模板 仓库: Next.js 项目模板 推荐理由: 包含TypeSc…

    2025年12月19日
    000
  • Flutter 主要福利

    Flutter 凭借其诸多优势,成为构建高质量跨平台应用的首选框架,深受开发者和企业的青睐: 一次编写,多平台运行: 使用单一代码库,即可构建适用于 Android、iOS、Web 和桌面的应用,显著提升开发效率。热重载加速开发: 热重载功能让开发者实时查看代码修改效果,加快迭代速度,提升开发效率。…

    2025年12月19日
    000
  • 我错误地使用了 Tailwind,所以你不必这样做

    三年前,我开始使用tailwind css,一个出色的前端开发库(本文不再赘述其优点,网上资源丰富)。我想分享一下我早期使用tailwind时不断犯的错误,希望能帮助大家避免重蹈覆辙。 Tailwind颠覆了传统CSS的级联样式表概念,通过“实用程序类”将CSS规则直接应用于DOM元素。起初感觉陌生…

    2025年12月19日
    000
  • 从优秀到卓越:掌握前端开发

    成为顶尖前端工程师,并非仅仅停留在HTML、CSS和JavaScript的编写层面。真正的卓越,需要掌握一系列关键技术、核心概念和最佳实践。本文将带您深入探索每个优秀前端开发者都应精通的领域,助您在职业道路上更上一层楼。 网络基础知识 缓存机制 缓存是提升网页加载速度和减轻服务器压力的关键技术。你需…

    2025年12月19日
    000
  • 如何在NestJS中轻松发送电子邮件?

    高效发送电子邮件:使用@nestixis/nestjs-mailer简化流程 在许多应用中,发送电子邮件至关重要,无论是用户通知、事务更新还是营销活动。然而,传统的电子邮件解决方案往往复杂且繁琐,需要整合邮件程序、模板语言,并处理各种依赖关系。 解决方案: @nestixis/nestjs-mail…

    好文分享 2025年12月19日
    000
  • 以 semver ‘0’ 开头

    您正准备发布一个新软件包,犹豫是否应该从版本 0.x 开始。本文将探讨为何直接从 v1.0.0 开始可能更合理。 许多开发者倾向于从 v0.x 开始,理由是:不确定性、时间压力以及对 SemVer 的理解不足。然而,SemVer 中的 0.x 版本代表着不稳定性,但这并不意味着库会频繁发生破坏性更改…

    2025年12月19日
    000
  • 通过技术 SEO 最佳实践增强 SaaS 产品开发

    确保您的SaaS平台易于目标用户发现和访问至关重要。技术SEO(搜索引擎优化)在此发挥着关键作用。将技术SEO最佳实践融入SaaS产品开发,能够显著提升平台的搜索可见性、用户体验和整体性能。 了解SaaS中的技术SEO 技术SEO专注于优化网站的技术层面,确保搜索引擎能够有效抓取和索引您的网站。对S…

    2025年12月19日
    000
  • 使用此命令在您的 Vite 项目中设置 Tailwind

    只需一个命令,即可轻松在您的 Vite 项目中配置 Tailwind CSS!通常,配置 Tailwind 需要安装、生成配置文件并添加模板等多个步骤。但现在,您可以使用 lazywind npm 包简化这个过程。 安装和使用: 全局安装 lazywind: 使用 npm install -g la…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信