TypeScript中向联合类型数组推入泛型子类型为何会触发类型错误？

嘿，这个问题我之前踩过坑，咱们先把场景摆出来，结合给定的类型定义，写一段会触发错误的代码，你一看就懂：

先把基础类型定义贴出来：

type TradeResponse = {
    id: string;
    assetId: string;
    price: number;
    quantity: number;
    createdAt: Date;
}

type OrderbookDiffResponse = {
    assetId: string;
    side: Side;
    price: number;
    updatedAt: Date;
    changeInQuantity: number;
}

enum Side {
    ASK = "ASK",
    BID = "BID",
}

type Channel = "orderbook" | "tradebook";

type ResponseMessageMap = {
    orderbook: OrderbookDiffResponse,
    tradebook: TradeResponse,
}

现在假设我们写这样一段代码：

// 存储所有消息的联合类型数组
let allMessages: ResponseMessageMap[Channel][] = [];

// 处理单个通道的泛型函数
function addChannelMessage<T extends Channel>(channel: T, message: ResponseMessageMap[T]) {
    // 这里TypeScript可能会抛出类型错误：
    // Argument of type 'ResponseMessageMap[T]' is not assignable to parameter of type 'TradeResponse | OrderbookDiffResponse'.
    // Type 'ResponseMessageMap[T]' is not assignable to type 'TradeResponse'.
    allMessages.push(message);
}

是不是一脸问号？明明ResponseMessageMap[T]的类型就是TradeResponse或者OrderbookDiffResponse，完全属于allMessages的类型范围，为什么TypeScript会报错？

原因其实很简单 #

TypeScript的泛型约束T extends Channel意味着T可以是Channel的任意子类型，包括Channel本身（也就是联合类型"orderbook" | "tradebook"），但更关键的是：TypeScript的类型检查器没办法在这个泛型函数内部，确认ResponseMessageMap[T]和TradeResponse | OrderbookDiffResponse是完全兼容的。

听起来有点绕？换个大白话：当T是一个具体的单值（比如"orderbook"），message的类型是OrderbookDiffResponse，没问题；但如果T是整个Channel联合类型，message的类型是OrderbookDiffResponse | TradeResponse，这时候TypeScript会犯轴：“我不能保证这个泛型类型的每一个可能的子类型，都能被安全地推入到联合类型数组里”——哪怕我们知道其实是可以的，但TypeScript的类型系统是结构化且保守的，它不会做这种“隐式的类型拓宽”，必须要你明确给出信号。

解决办法有几种，你可以按需选： #

• 类型断言（最简单直接）
  直接告诉TypeScript“我确定这个类型是对的”：

  allMessages.push(message as ResponseMessageMap[Channel]);
  

  这种方法最快，但要注意，类型断言相当于你绕过了TypeScript的类型检查，所以你得自己确保类型是真的兼容，别埋坑。

• 用类型收窄明确泛型范围
  如果不想用断言，可以通过类型收窄让TypeScript彻底确认类型：

  function addChannelMessage<T extends Channel>(channel: T, message: ResponseMessageMap[T]) {
      if (channel === "orderbook") {
          allMessages.push(message as OrderbookDiffResponse);
      } else {
          allMessages.push(message as TradeResponse);
      }
  }
  

  这种方法更“类型安全”，但缺点是如果以后Channel类型扩展了新的成员，你就得跟着加对应的判断分支，有点繁琐。

• 修改函数参数的类型约束
  如果你不需要泛型T做其他额外的事情，干脆把泛型去掉，直接用Channel作为参数类型：

  function addChannelMessage(channel: Channel, message: ResponseMessageMap[Channel]) {
      allMessages.push(message);
  }
  

  这种情况下TypeScript能直接推断出message的类型就是TradeResponse | OrderbookDiffResponse，自然就不会报错了，是最“符合TypeScript类型系统设计”的写法。

内容来源于stack exchange