如何使用工厂模式创建带有构造函数的代码拆分打字稿模块

Question

我有很多适配器都是从这样的接口实现的

export interface IAdapter {
   doSomething(): void;
}

和实现的类看起来与您所期望的非常相似和基本

export default class AdapterA implements IAdapter {
   private _property: string;
   constructor(someProperty: string) {
       this._property = someProperty;
   }
}

我有一个适配器工厂，想像这样使用它

export abstract class AdapterFactory {
    static async getInstance(name: string) Promise<IAdapter> {
        switch(name) {
            case 'a':
                return import('./adapters/adapter-a');
            case 'b':
                return import('./adapters/adapter-b');
        }
    }
}

在调用工厂的代码之后，我希望能够使用返回的模块来实例化适配器的新实例，例如

const adapterModule = await getInstance('a');
const myNewAdapter = new adapterModule('prop');
myNewAdapter.doSomething();

当我在工厂里尝试这个时，我得到：

Type 'typeof import("/[absolute path]/adapters/AdapterA")' provides no match for the signature 'new (someProperty: string): IAdapter'

所以我尝试像这样添加 new 的定义（我不喜欢）：

export interface IAdapter {
   new(someProperty: string): IAdapter;
   doSomething(): void;
}

现在我得到：

This expression is not constructable.

任何人都可以提供的任何帮助都会受到极大的欢迎

Answer 1

导入的构造函数should be extracted 来自default:

const { default: adapterModule } = await getInstance('a');

The reason we need default is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of module.exports, it will instead create an artificial namespace object for the CommonJS module.

不相关的小建议：

重命名 getInstance -> getConstructor
将 return 类型更改为 Promise<IAdapterConstructor>

其中 IAdapterConstructor 是：

interface IAdapterConstructor {
  new(someProperty: string): IAdapter;
}

如何使用工厂模式创建带有构造函数的代码拆分打字稿模块

How to create a code split typescript module with a constructor using the factory pattern

factory-pattern

typescript

webpack

code-splitting