TypeScript Mixins

除了傳統(tǒng)的面向?qū)ο罄^承方式，還流行一種通過可重用組件創(chuàng)建類的方式，就是聯(lián)合另一個(gè)簡單類的代碼。 你可能在Scala等語言里對mixins及其特性已經(jīng)很熟悉了，但它在JavaScript中也是很流行的。

混入示例

下面的代碼演示了如何在TypeScript里使用混入。 后面我們還會解釋這段代碼是怎么工作的。

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

}

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

class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }

    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: boolean = false;
    activate: () => void;
    deactivate: () => void;
}
applyMixins(SmartObject, [Disposable, Activatable]);

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

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

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

理解這個(gè)例子

代碼里首先定義了兩個(gè)類，它們將做為mixins。 可以看到每個(gè)類都只定義了一個(gè)特定的行為或功能。 稍后我們使用它們來創(chuàng)建一個(gè)新類，同時(shí)具有這兩種功能。

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

}

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

下面創(chuàng)建一個(gè)類，結(jié)合了這兩個(gè)mixins。 下面來看一下具體是怎么操作的：

class SmartObject implements Disposable, Activatable {

首先應(yīng)該注意到的是，沒使用extends而是使用implements。 把類當(dāng)成了接口，僅使用Disposable和Activatable的類型而非其實(shí)現(xiàn)。 這意味著我們需要在類里面實(shí)現(xiàn)接口。 但是這是我們在用mixin時(shí)想避免的。

我們可以這么做來達(dá)到目的，為將要mixin進(jìn)來的屬性方法創(chuàng)建出占位屬性。 這告訴編譯器這些成員在運(yùn)行時(shí)是可用的。 這樣就能使用mixin帶來的便利，雖說需要提前定義一些占位屬性。

// Disposable
isDisposed: boolean = false;
dispose: () => void;
// Activatable
isActive: boolean = false;
activate: () => void;
deactivate: () => void;

最后，把mixins混入定義的類，完成全部實(shí)現(xiàn)部分。

applyMixins(SmartObject, [Disposable, Activatable]);

最后，創(chuàng)建這個(gè)幫助函數(shù)，幫我們做混入操作。 它會遍歷mixins上的所有屬性，并復(fù)制到目標(biāo)上去，把之前的占位屬性替換成真正的實(shí)現(xiàn)代碼。

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        })
    });
}