TypeScript中含不同类型元素的数组及复杂对象如何声明类型？

一、通用多类型数组的声明方式 #

如果数组里包含两种不同类型的元素，直接用联合类型作为数组的元素类型即可，写法有两种：

• 语法1：(类型A | 类型B)[]
• 语法2：Array<类型A | 类型B>

比如一个同时包含字符串和数字的数组，声明方式如下：

const mixedArray: (string | number)[] = ["hello", 123, "world", 456];

二、针对你的serverInfo对象的类型声明 #

针对你提供的serverInfo结构，我们可以拆分出具体的类型，再组合起来：

1. 先定义基础类型 #

首先定义Server类型（对应数组里的"server"类型元素）：

type Server = {
  id: number;
  name: string;
  unread: boolean;
  type: "server"; // 用字面量类型固定type值，方便后续类型区分
  icon: string;
  gif: null | string; // 适配gif为null或字符串的情况
};

然后定义Folder类型（对应数组里的"folder"类型元素）：

type Folder = {
  type: "folder"; // 同样用字面量类型固定type值
  servers: Server[]; // 文件夹内的servers数组是Server类型的集合
};

2. 定义ServerInfo整体类型 #

最后把@me属性和servers数组合并成整体类型：

type ServerInfo = {
  "@me": {
    unread: boolean;
  };
  servers: (Server | Folder)[]; // servers数组是Server和Folder的联合类型
};

3. 给serverInfo标注类型 #

现在可以给你的变量显式标注类型：

export const serverInfo: ServerInfo = {
  "@me": {
    unread: true,
  },
  servers: [
    {
      id: 1,
      name: "Detaux",
      unread: false,
      type: "server",
      icon: "detaux.webp",
      gif: null,
    },
    {
      type: "folder",
      servers: [
        {
          id: 5,
          name: "freeCodeCamp",
          unread: true,
          type: "server",
          icon: "freeCodeCamp.webp",
          gif: null,
        },
      ],
    },
  ],
};

这样做的好处是：不仅能让TypeScript正确校验数组中两种元素的结构，还能通过type字面量实现类型窄化——比如在遍历servers数组时，TypeScript会根据type的值自动识别当前元素是Server还是Folder，提供准确的类型提示。

内容的提问来源于stack exchange，提问作者Chandraprakash Darji