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

Vesper632024-11-04 22:25

你提供的代码是 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;
      }
  );

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

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

括号内的部分定义了一个联合类型：
typescript 复制代码
```
{
  type: "doc";
  icon: string;
}
|
{
  type: "card";
  desc: string;
  img: string;
}
```
这意味着 SectionItem 可以是以下两种类型之一：
- 一个对象，包含 type 为 "doc" 和 icon 属性。
- 一个对象，包含 type 为 "card"、desc 和 img 属性。

组合在一起

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

具体来说：

如果 type 是 "doc"，那么 SectionItem 必须包含 baseSection 的属性以及 icon 属性。
如果 type 是 "card"，那么 SectionItem 必须包含 baseSection 的属性以及 desc 和 img 属性。

示例

以下是两个有效的 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）来包含不同的附加属性。这种类型定义方式可以提高代码的类型安全性和可读性。