如何使用工厂模式实现带构造函数的TypeScript模块代码分割

问题根源 #

你遇到的报错是两个基础问题共同导致的：

1. 动态import()语法返回的是完整模块命名空间对象，你的适配器类是默认导出的，所以必须取模块对象的.default属性才能拿到实际的类构造函数
2. 你给getInstance定义的返回类型错误，且构造函数签名不能写在实例接口IAdapter中：IAdapter是约束类实例的结构，构造函数属于类的静态侧，需要单独定义构造函数类型

可行解决方案 #

第一步：保留原有IAdapter，新增单独的构造函数类型 #

export interface IAdapter {
   doSomething(): void;
}

// 新增：专门定义适配器类的构造函数类型
export type AdapterConstructor = new (someProperty: string) => IAdapter;

第二步：修改工厂类的getInstance实现 #

修正返回类型，同时取动态导入的默认导出：

export abstract class AdapterFactory {
    // 返回类型改为构造函数的Promise，不是实例的Promise
    static async getInstance(name: string): Promise<AdapterConstructor> {
        switch(name) {
            case 'a':
                return (await import('./adapters/adapter-a')).default;
            case 'b':
                return (await import('./adapters/adapter-b')).default;
            default:
                throw new Error(`未找到匹配的适配器：${name}`);
        }
    }
}

第三步：按你预期的方式调用即可 #

const adapterConstructor = await AdapterFactory.getInstance('a');
const myNewAdapter = new adapterConstructor('prop');
myNewAdapter.doSomething(); // 无类型报错，功能正常

之前报错的原因说明 #

• 第一个报错：你直接把import()返回的模块对象当构造函数调用，模块对象本身没有实现构造签名，取.default拿到导出的类后就正常了
• 第二个报错：你把new签名写到了实例接口IAdapter里，实例上不存在构造方法，所以会提示不可构造，构造函数类型单独定义即可，不需要修改原有IAdapter的结构

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