TypeScript P2P文件传输事件发射器的类型校验与自动补全问题

要实现事件类型自动补全、监听函数参数类型推断以及类型合法性校验，核心是让事件名与对应的回调参数类型建立强关联，避免泛型的无约束使用。以下是具体的修正方案：

问题根源 #

你当前的on方法泛型T没有与事件名绑定，TypeScript无法推断T和对应事件的具体类型关系，导致类型检查失效并抛出错误。同时手动指定泛型的方式容易出现类型不匹配的问题，也增加了代码冗余。

修正步骤 #

1. 定义事件-数据类型映射表 #

先明确每个事件对应的参数类型，建立一个清晰的映射关系：

type Data<T> = {
    type: string
    payload: {
        to: string
        from: string
    } & T
}

type FileChunkData = Data<{ chunk: ArrayBuffer }>
type FileEndData = Data<{ filesize: number }>
type FileStartData = Data<{ filename: string }>

// 核心：事件名与对应数据类型的映射
type EventMap = {
    'file:start': FileStartData
    'file:chunk': FileChunkData
    'file:end': FileEndData
}

2. 基于映射表定义监听集合类型 #

利用TypeScript的映射类型，自动生成每个事件对应的监听集合，避免重复定义：

type Listener<T> = (data: T) => void
type Listeners<T> = Set<Listener<T>>

// 从EventMap自动推导ListenersMap
type ListenersMap = {
    [E in keyof EventMap]: Listeners<EventMap[E]>
}

3. 重构on方法的类型定义 #

让on方法的泛型参数对应事件名，通过事件名从EventMap中自动提取对应的参数类型，无需手动指定泛型：

class FileTransfer {
    listeners: ListenersMap

    constructor() {
        this.listeners = {
            'file:start': new Set(),
            'file:end': new Set(),
            'file:chunk': new Set(),
        }
    }
    
    // 泛型E绑定事件名，自动推断回调参数类型
    on<E extends keyof EventMap>(event: E, fn: Listener<EventMap[E]>) {
        this.listeners[event].add(fn)
    }
}

效果验证 #

现在你的需求都能得到满足：

• 自动补全：输入transfer.on('时，TypeScript会自动提示file:start、file:chunk、file:end三个事件名。
• 参数类型推断：当选择file:start事件后，回调函数的data参数会自动推断为FileStartData类型，无需手动声明。
• 类型合法性校验：

  function onData(data: FileChunkData) {}
  transfer.on('file:start', onData) // 报错：类型不兼容，符合预期
  transfer.on('file:start', (data: {}) => {}) // 报错：参数类型不匹配，符合预期
  

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