ES6-使用 typescript mixins 导出类答案

【问题标题】：ES6-Exporting classes with typescript mixinsES6-使用 typescript mixins 导出类
【发布时间】：2021-03-15 23:45:44
【问题描述】：

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

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

文件“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 中会产生错误。

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

【问题讨论】：

标签： typescript webpack mixins es6-modules

【解决方案1】：

恭喜你的第一篇文章！

试试这个：

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

您不能使用classB 注释字段，因为classB 不是类型。这是一个价值。要使用该值的类型，需要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) {}），它产生一个真正的类。 TypeScript 中的类都是类型和值。

【讨论】：

非常感谢！我将对您的替代解决方案进行尝试，并将文件“classB.ts”中的导出更改为export default class ClassB_WithMixin extends addMixinA(ClassB) {}。这里有一个无关的类，但代码对我来说似乎更干净 =)