TypeScript如何为serializePromises的返回promise的泛型fn参数标注类型

完整TypeScript实现 #

function serializePromises<T extends (...args: any[]) => Promise<any>>(fn: T): T {
  let last = Promise.resolve();
  return function (this: ThisParameterType<T>, ...args: Parameters<T>): ReturnType<T> {
    last = last.catch(() => {}).then(() => fn.apply(this, args));
    return last as ReturnType<T>;
  } as T;
}

类型逻辑说明 #

• 泛型参数T通过extends (...args: any[]) => Promise<any>做类型约束，保证传入的fn必须是返回Promise的函数，符合功能要求
• 使用TS内置工具类型Parameters<T>自动推导原函数的入参类型，ReturnType<T>复用原函数的返回值类型，保证包装后的函数和原函数的调用签名完全一致，不会丢失类型提示
• 额外增加了ThisParameterType<T>处理this指向的类型保留，如果你不需要处理类方法这类带this指向的场景，可以省略这部分逻辑

使用示例 #

// 示例原函数：入参为number，返回Promise<{id: number, name: string}>
const fetchData = async (id: number) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  return {id, name: `item-${id}`};
}

const serialFetch = serializePromises(fetchData);

// 类型校验正常：入参要求number，返回值类型和原函数一致
serialFetch(1).then(res => console.log(res.name));
serialFetch(2).then(res => console.log(res.name));
// 错误传参会触发TS报错，比如 serialFetch('1') 会提示入参类型不匹配

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