ES6-Exporting 类与 typescript mixins

Question

我在编写一个复杂的 class 层次结构时遇到了一个令人费解的问题，每个 class 都是从单独的 ES6 类模块文件中导出的，涉及混合。

这是一个重现我的问题的简化示例：

文件“mixinA.ts”:

type Constructor = new (...args: any[]) => {};

export default function addMixinA<TBase extends Constructor>(Base: TBase) {
    return class MixedInA extends Base {
        public prop1 = 1
    }
}

文件“classB.ts”:

import addMixinA from "./mixinA"

class ClassB {
    public prop2 = 2
}

let ClassB_WithMixin = addMixinA(ClassB)
export default ClassB_WithMixin

文件“classC.ts”:

import classB from "./classB"

class ClassC {

    // 'classB' refers to a value, but is being used as a type here. Did you mean 'typeof classB'? ts(2749)
    public classB_instance: classB
}

正如您在我在错误行上方添加的评论中看到的那样，在使用 classA.ts.

的导出时，文件 classC.ts 中产生了一个错误

我做错了什么吗？你能发现我的错误吗？

Answer 1

恭喜您获得第一个 post！

试试这个：

class ClassC {
    public classB_instance: InstanceType<typeof classB> = new classB()
}

您不能使用 classB 注释字段，因为 classB 不是类型。这是一个价值。要使用此值的 type，需要 typeof 运算符 (type Foo = typeof classB).

或者，这样做：

class ClassB_WithMixin extends addMixinA(ClassB) {}

class ClassC {

    public classB_instance: ClassB_WithMixin = new ClassB_WithMixin()
}

这里的区别在于，我们不是在进行赋值 (let ClassB_WithMixin = addMixinA(ClassB))，而是在进行继承 (class ClassB_WithMixin extends addMixinA(ClassB) {})，这会产生一个真正的 class。而 TypeScript 中的 classes 都是类型和值。

ES6-Exporting 类与 typescript mixins

ES6-Exporting classes with typescript mixins

typescript

webpack

mixins

es6-modules

ES6-Exporting 类 与 typescript mixins

ES6-Exporting classes with typescript mixins

typescript

webpack

mixins

es6-modules

ES6-Exporting 类与 typescript mixins