【TS】TypeScript 类型定义之联合类型(union types)和交叉类型(intersection types)

你提供的代码是 TypeScript 中的一种类型定义,它使用了联合类型(union types)和交叉类型(intersection types)。让我们逐步解析这个定义:

基础类型

首先,假设你已经定义了一个基础类型 baseSection,例如:

typescript 复制代码
type baseSection = {
  id: string;
  title: string;
};

联合类型和交叉类型

接下来是类型定义 SectionItem

typescript 复制代码
type SectionItem = baseSection &
  (
    | {
        type: "doc";
        icon: string;
      }
    | {
        type: "card";
        desc: string;
        img: string;
      }
  );

这个定义可以拆解为以下部分:

  1. 交叉类型(Intersection Type)
    baseSection & (...) 表示 SectionItem 类型必须同时拥有 baseSection 类型的属性和括号内的联合类型之一的属性。

  2. 联合类型(Union Type)

    括号内的部分定义了一个联合类型:

    typescript 复制代码
    {
      type: "doc";
      icon: string;
    }
    |
    {
      type: "card";
      desc: string;
      img: string;
    }

    这意味着 SectionItem 可以是以下两种类型之一:

    • 一个对象,包含 type"doc"icon 属性。
    • 一个对象,包含 type"card"descimg 属性。

组合在一起

将交叉类型和联合类型组合在一起,SectionItem 类型必须包含 baseSection 的属性,同时根据 type 的不同,还必须包含特定的附加属性。

具体来说:

  • 如果 type"doc",那么 SectionItem 必须包含 baseSection 的属性以及 icon 属性。
  • 如果 type"card",那么 SectionItem 必须包含 baseSection 的属性以及 descimg 属性。

示例

以下是两个有效的 SectionItem 类型的对象示例:

typescript 复制代码
const docItem: SectionItem = {
  id: "1",
  title: "Documentation",
  type: "doc",
  icon: "doc-icon.png"
};

const cardItem: SectionItem = {
  id: "2",
  title: "Card",
  type: "card",
  desc: "This is a card description.",
  img: "card-image.png"
};

总结

这种写法在 TypeScript 中非常有用,它允许你定义复杂的对象类型,确保对象必须包含某些基础属性,同时根据某个属性的值(如 type)来包含不同的附加属性。这种类型定义方式可以提高代码的类型安全性和可读性。

相关推荐
姓刘的哦6 分钟前
Ubuntu环境安装
linux·运维·ubuntu
小小寂寞的城13 分钟前
Ubuntu里安装Jenkins
ubuntu·ci/cd·docker·jenkins
AdrichPro1 小时前
10、Linux C 网络编程(完整版)
linux·服务器·c语言·网络
IT 小旋风2 小时前
Linux centos 7 常用服务器搭建
linux·服务器·centos
Hamm2 小时前
为了减少维护成本,我们把AirPower4T拆成了一个个NPM包
前端·vue.js·typescript
千百元3 小时前
centos线程数查看
linux·运维·服务器
犽戾武4 小时前
浅谈多个虚拟机(WSL和VMWare)的网络配置
linux·网络
最后一个bug5 小时前
教你快速理解linux中的NUMA节点探测是干什么用的?
linux·c语言·开发语言·arm开发·嵌入式硬件
awei09165 小时前
Linux系统安装RabbitMQ
linux·运维·rabbitmq·ruby
linux kernel5 小时前
第八部分:进程创建退出等待和替换
linux·运维·服务器