如何让TypeScript对象的value类型根据自身type条件关联？

要实现type与value的类型关联，你需要用TypeScript的区分联合类型（Discriminated Unions），通过将ChatItemMessage定义为多个具体类型的联合，让TypeScript能根据type字段自动收窄value的类型。

正确的类型定义 #

enum ChatItemMessageType {
    Date = "date",
    Message = "message",
}

type ChatMessage = {
    id: number;
};

type ChatDate = {
    date: string;
};

// 区分联合类型：每个分支明确对应type和value的关系
type ChatItemMessage = 
  | { type: ChatItemMessageType.Message; value: ChatMessage }
  | { type: ChatItemMessageType.Date; value: ChatDate };

为什么之前的写法失败 #

• 第一种写法中，ChatItemMessage['type']是ChatItemMessageType的完整联合类型，条件判断会直接返回ChatMessage | ChatDate，无法建立type与value的一对一关联。
• 第二种泛型写法，当你使用ChatItemMessage[]时，泛型参数会被推断为ChatItemMessageType的联合，同样无法实现类型关联，且泛型写法会增加使用复杂度。

正确使用示例 #

现在你可以正常判断type并访问对应的value属性，IDE会自动完成类型推断：

declare const data: ChatItemMessage[];
data.map(message => 
  message.type === ChatItemMessageType.Date ?
    message.value.date : // 自动推断value为ChatDate，可访问date属性
    message.value.id.toFixed() // 自动推断value为ChatMessage，可访问id属性
);

TypeScript会将type字段视为区分符，当你通过条件语句判断type的值时，会自动把当前message的类型收窄到对应的联合分支，从而确保value的类型与type严格匹配，避免类型错误。

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