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

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

基础类型

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

type baseSection = {
    
    
  id: string;
  title: string;
};

联合类型和交叉类型

接下来是类型定义 SectionItem：

type SectionItem = baseSection &
  (
    | {
    
    
        type: "doc";
        icon: string;
      }
    | {
    
    
        type: "card";
        desc: string;
        img: string;
      }
  );

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

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

2. 联合类型（Union Type）：
   括号内的部分定义了一个联合类型：

   {
         
         
     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 类型的对象示例：

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