如何为TypeScript动态导入中clientImport的example参数添加类型

原代码里example函数的参数类型被推断为any，核心原因是TypeScript没法直接从泛型字符串T推导对应模块的具体类型。可以通过柯里化函数的方式，让TypeScript借助import()调用时的上下文明确模块类型，进而给example函数参数加上正确类型。

修改后的代码实现 #

function clientImport<T extends string>(v: T) {
  return function <Z>(x: (q: T) => Promise<Z>) {
    const resolve = () => x(v);
    const example = (value: Z) => {
      return value;
    };
    return {
      resolve,
      path: v,
      example
    };
  };
}

// 使用示例
const demo = async () => {
  const { path, resolve, example } = clientImport('./client_code.tsx')(p => import(p));
  console.log(path);
  const v = await resolve();
  example(v); // 这里v的类型会正确对应模块导出类型，example参数类型不再是any
};

原理说明 #

• 柯里化后，第一次调用clientImport仅传入路径字符串，第二次调用传入p => import(p)时，TypeScript会根据实际模块路径推导import(p)的返回值类型，也就是泛型Z的具体类型。
• 此时example函数的参数类型绑定为Z，自然就能获得模块的精确类型，不再是any。

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