Typescript Mixins(混合)

除了慣例的面對對象的思想，另一種較流行的通過可復用組件創建類的方法是將簡單的類混合到一起。你可能對這種混合的方式比較熟悉或對Scala語言的特性有理解，這種模式在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])
 
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 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 {

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

為了滿足這些需求，我們為這些將要混合進來的屬性創建占位符和其類型。這樣可以讓編譯器認識到這些成員在運行時是可用的。這么做能達到混合的利益，即使我們需要提前編寫成員的占位符及其類型。

// Disposable
isDisposed: boolean = false;
dispose: () => void;
// Activatable
isActive: 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];
        })
    }); 
}