如何在TypeScript中基于联合字符串类型实现条件类型约束

已定义以下接口和联合类型：

interface IPargraph {
    id: number,
    value: string
}

interface ITask {
    id: number,
    date: Date
}

export type BodyTypes = "PARAGRAPH" | "TASK" | "IMAGE"

需求是实现 INoteBody，让其中的 data 类型根据 type 的取值自动对应：当 type 为 "PARAGRAPH" 时，data 必须是 IPargraph 类型；当 type 为 "TASK" 时，data 必须是 ITask 类型；"IMAGE" 类型可自行对应其数据结构。

比如以下代码应当被TypeScript判定为无效（因为type是"PARAGRAPH"但data用了ITask的结构）：

const note: INoteBody = {
    type: "PARAGRAPH",
    data: {
        id: 1,
        date: new Date()
    }
}

解决方案 #

单一接口无法实现这种类型关联逻辑，需要通过联合类型绑定每个type与对应data的关系：

1. 为每个type定义独立的关联类型：

// 段落类型
type ParagraphBody = {
  type: "PARAGRAPH";
  data: IPargraph;
};

// 任务类型
type TaskBody = {
  type: "TASK";
  data: ITask;
};

// 图片类型，可替换为实际的图片数据接口
type ImageBody = {
  type: "IMAGE";
  data: unknown;
};

2. 将上述类型组合成INoteBody联合类型：

export type INoteBody = ParagraphBody | TaskBody | ImageBody;

效果验证 #

此时TypeScript会自动根据type的值窄化data的类型：

• 当type设为"PARAGRAPH"，data必须包含id和value字段，传入date会直接报错
• 当type设为"TASK"，data必须包含id和date字段，缺少必填字段会触发提示
• 完全满足类型与数据匹配的需求

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