TypeScript 进阶 混入 Mixins

Question

TypeScript 混入 Mixins 其实 vue 也有 mixins 这个东西 你可以把他看作为合并

// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

// 1. 创建 SmartObject 类，结合了 Disposable 和 Activatable mixins
// 没使用 extends 而是使用 implements。 把类当成了接口，仅使用 Disposable 和 Activatable 的类型 而非其实现。
// 这意味着我们需要在类里面实现接口。 但是这是我们在使用 mixin 时想避免的。
class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }

    // 2. 我们可以这么做来达到目的，为将要 mixin 进来的属性方法创建出占位属性。 
    // 这告诉编译器这些成员在运行时是可用的。 这样就能使用 mixin 带来的便利，虽说需要提前定义一些占位属性。
    // Disposable
    isDisposed: boolean = false;
    dispose!: () => void; // 非空断言， 不然会编译报错
    // Activatable
    isActive: boolean = false;
    activate!: () => void; // 非空断言， 不然会编译报错
    deactivate!: () => void; // 非空断言， 不然会编译报错
}
// 3. 最后，把 mixins 混入定义的类，完成全部实现部分。
applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

////////////////////////////////////////
// In your runtime library somewhere
////////////////////////////////////////

创建这个帮助函数，帮我们做混入操作

// 它会遍历 mixins 上的所有属性，并复制到目标上去，把之前的占位属性替换成真正的实现代码。
function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}