Typescript Mixins(混合)

除了慣例的面對對象的思想，另外一種較流行的經過可複用組件建立類的方法是將簡單的類混合到一塊兒。你可能對這種混合的方式比較熟悉或對Scala語言的特性有理解，這種模式在JavaScript社區也有必定的人氣。

混合案例

在下面的代碼中，咱們展現瞭如何在TypeScript中混合模型，看完代碼以後，再分析它的執行。

// Disposable Mixinclass Disposable {
    isDisposed: boolean;
    dispose() {        this.isDisposed = true;
    }
 
} 
// Activatable Mixinclass 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]) 
var smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000); 
////////////////////////////////////////// 在你代碼的某處////////////////////////////////////////function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        })
    }); 
}

理解案例

該代碼例子剛開始的兩個類是將被做爲混合部分的類。你能夠看到，每一類都有特定的功能。以後咱們將這兩個類混合成一個同時擁有這兩個類的功能的新類。

// Disposable Mixinclass Disposable {
    isDisposed: boolean;
    dispose() {        this.isDisposed = true;
    }
 
} 
// Activatable Mixinclass Activatable {
    isActive: boolean;
    activate() {        this.isActive = true;
    }
    deactivate() {        this.isActive = false;
    }
}

接下來，咱們建立一個新的類，並將這兩個類混合到這個新的類中。詳細的看看它是如何作的：

class SmartObject implements Disposable, Activatable {

你可能會注意到的第一件事是咱們使用了"implements"，而不是"extends"。這樣作是將類做爲接口對待，只使用了"Disposable"和"Activatable"後面的類型，而不是實現這兩個接口。這也意味着咱們須要在類中實現這兩個接口，但這偏偏是咱們想經過混合來避免的問題。

爲了知足這些需求，咱們爲這些將要混合進來的屬性建立佔位符和其類型。這樣可讓編譯器認識到這些成員在運行時是可用的。這麼作能達到混合的利益，即便咱們須要提早編寫成員的佔位符及其類型。

// DisposableisDisposed: boolean = false;
dispose: () => void;// ActivatableisActive: boolean = false;
activate: () => void;
deactivate: () => void;

最後，咱們將這兩個類混合進新的類，建立全部的實現方式。

applyMixins(SmartObject, [Disposable, Activatable])

最後，咱們建立一個幫助咱們作混合的輔助函數。這個函數遍歷每一個混合類上的每一個屬性，而且將他們拷貝到混合後的類中，填充在以前所留的佔位符而且將其實現。

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