TypeScript中Vue组合式函数动态函数参数类型提示缺失问题

我有一个接收函数作为参数的Vue组合式函数，代码如下：

export const workFunction = (fn) => {
    let response = null;
    const exec = async (...args) => {
        response = await fn(...args);
        console.log(response);
    };
    return {
        response,
        exec,
    };
};

我按如下方式使用该函数：

// exportFunction 是导入的动态函数
const createApi = workFunction(exportFunction);
createApi.exec();

问题：调用createApi.exec()时无法看到exportFunction的参数类型提示，请问该如何解决？

解决方案 #

方案1：TypeScript泛型约束（推荐） #

通过TypeScript泛型捕获传入函数的参数和返回值类型，让exec方法自动继承原函数的参数提示：

export const workFunction = <T extends (...args: any[]) => Promise<any>>(fn: T) => {
    let response: Awaited<ReturnType<T>> | null = null;
    const exec = async (...args: Parameters<T>) => {
        response = await fn(...args);
        console.log(response);
    };
    return {
        response,
        exec,
    };
};

关键细节：

• <T extends (...args: any[]) => Promise<any>>：约束泛型T为异步函数类型，适配你的业务场景
• Parameters<T>：提取原函数的参数类型，让exec的参数与exportFunction完全对齐
• Awaited<ReturnType<T>>：提取原函数Promise的内部值类型，让response也具备类型提示

只要exportFunction本身有类型定义（或通过.d.ts声明文件补充），哪怕是动态导入的函数，编辑器都会为createApi.exec()提供准确的参数提示。

方案2：纯JavaScript环境用JSDoc补充类型 #

如果项目未使用TypeScript，可以通过JSDoc为编辑器提供类型信息：

/**
 * @template {Function} T
 * @param {T} fn
 * @returns {{
 *   response: Awaited<ReturnType<T>> | null,
 *   exec: (...args: Parameters<T>) => Promise<void>
 * }}
 */
export const workFunction = (fn) => {
    let response = null;
    const exec = async (...args) => {
        response = await fn(...args);
        console.log(response);
    };
    return {
        response,
        exec,
    };
};

支持TypeScript的编辑器（如VS Code）会识别JSDoc注释，为exec方法生成参数类型提示。

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