TypeScript异步泛型函数SendMessage解析及resolve来源疑问

函数代码与类型提示 #

先看你写的函数代码：

async function SendMessage<T extends WorkerResponse>(msg: { id: number }): Promise<T>
{
    const response = await new Promise<WorkerResponse>(resolve =>
    {
        waitingMessages.set(msg.id, resolve);
        worker.postMessage(msg);
    });

    return response as T;
}

鼠标悬停得到的类型信息：

// resolve参数的类型
(parameter) resolve: (value: WorkerResponse | PromiseLike<WorkerResponse>) => void

// waitingMessages的类型
const waitingMessages: Map<number, (response: WorkerResponse) => void>

一、SendMessage函数的功能 #

这个异步泛型函数是给Web Worker发送消息，并等待Worker返回对应响应的封装，核心逻辑：

1. 泛型约束：T extends WorkerResponse规定函数返回的Promise最终值必须是WorkerResponse的子类型，最后通过as T做类型断言，让返回值符合泛型要求。
2. 消息发送：接收一个带唯一id的消息对象，创建Promise后，把Promise的resolve函数存入waitingMessages（以消息id为键的Map），再调用worker.postMessage(msg)把消息发给Worker。
3. 响应等待：当Worker处理完消息后，会通过消息id从waitingMessages中取出对应的resolve函数并调用，传入WorkerResponse类型的响应数据。此时Promise状态变为完成，await拿到响应后返回。

二、resolve参数的来源 #

resolve是Promise构造函数自动传入的回调参数：

• 当你创建new Promise((resolve, reject) => { ... })时，Promise内部会生成两个函数：resolve（用于标记Promise成功完成）和reject（用于标记Promise失败），并作为参数传给你写的回调函数。
• 从类型提示能看到，resolve可以接收WorkerResponse或Promise风格的WorkerResponse值，调用它就会让外部的await获取到这个值，结束等待状态。
• 代码里把resolve存入waitingMessages，是为了让Worker端能在处理完消息后，手动触发当前Promise的完成，实现“发消息-等响应”的异步通信流程。

内容的提问来源于stack exchange，提问作者Zoltán Orosz