TypeScript如何根据messageType字段推断消息处理器参数类型？

问题背景 #

我定义了以下TypeScript类型与类：

export type IncomingMessage =
  | MessageText
  | MessageGameStarted
//| ... 其他消息类型

export type IncomingMessageType = 
  | IncomingMessage['messageType']

其中IncomingMessage的每个成员都是带有唯一messageType字段的接口，示例如下：

interface MessageText {
  messageType: MessageType.TEXT
  content: string
}

interface MessageGameStarted {
  messageType: MessageType.GAME_STARTED
}

// ... 其他消息接口

另外我还有一个Network类，用于监听这些消息并分发给对应处理器，支持根据IncomingMessageType添加处理器：

type Handler<T extends IncomingMessage> = (message: T) => any
type Handlers = {[messageType in IncomingMessageType]?: Handler</* 这里需要正确类型 */>}

class Network {
    private readonly handlers: Handlers = {}
    
    on<T extends IncomingMessage>(messageType: T['messageType'], handler: Handler<T>) {
        this.handlers[messageType] = handler
        return this
    }
}

我需要实现两个目标：

• 让Network.on方法具备类型安全性：传入指定messageType时，TypeScript自动推断handler中message参数的对应类型（如传入MessageType.TEXT时，message应为MessageText类型）
• 正确定义Handlers类型，使其能根据messageType自动匹配对应的Handler泛型类型

解决方案 #

核心思路是通过显式的消息类型映射，让TypeScript建立messageType与消息接口的精准关联，以此实现类型推断和安全约束。

完整实现代码 #

// 定义MessageType枚举（补充完整基础枚举）
enum MessageType {
  TEXT = 'TEXT',
  GAME_STARTED = 'GAME_STARTED'
}

// 消息接口定义
interface MessageText {
  messageType: MessageType.TEXT
  content: string
}

interface MessageGameStarted {
  messageType: MessageType.GAME_STARTED
}

// 核心：消息类型映射表，关联messageType与对应消息接口
type MessageMap = {
  [MessageType.TEXT]: MessageText
  [MessageType.GAME_STARTED]: MessageGameStarted
  // 新增其他消息类型时，在此补充映射关系即可
}

// 基于映射表重构基础类型
export type IncomingMessage = MessageMap[keyof MessageMap]
export type IncomingMessageType = keyof MessageMap

// 重新定义处理器相关类型
type Handler<T extends IncomingMessage> = (message: T) => any
// Handlers自动匹配每个messageType对应的处理器类型
type Handlers = {
  [K in IncomingMessageType]?: Handler<MessageMap[K]>
}

class Network {
  private readonly handlers: Handlers = {}

  // 改造on方法，实现自动类型推断
  on<K extends IncomingMessageType>(
    messageType: K,
    handler: Handler<MessageMap[K]>
  ) {
    this.handlers[messageType] = handler
    return this
  }
}

效果验证 #

调用on方法时，TypeScript会自动完成类型推断：

const network = new Network()

network.on(MessageType.TEXT, message => {
  // message自动推断为MessageText类型，可直接访问content属性
  console.log(message.content)
})

network.on(MessageType.GAME_STARTED, message => {
  // message自动推断为MessageGameStarted类型
  console.log(message.messageType)
})

关键说明 #

1. MessageMap的作用：通过键值对显式绑定messageType和消息接口，是实现类型精准匹配的核心基础
2. Handlers类型优化：利用映射类型遍历所有消息类型，自动绑定对应消息接口作为处理器泛型参数，确保类型一致性
3. on方法改造：通过泛型K约束传入的messageType，直接从映射表中获取对应消息类型，既实现自动推断，又能在处理器类型不匹配时触发TypeScript报错

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