除了慣例的面對對象的思想，另一種較流行的通過可復用組件創建類的方法是將簡單的類混合到一起。你可能對這種混合的方式比較熟悉或對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();}// DisposableisDisposed: boolean = false;dispose: () => void;// ActivatableisActive: 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];})}); }

轉載于:https://www.cnblogs.com/ys-ys/p/5250594.html

總結

以上是生活随笔為你收集整理的Typescript Mixins(混合)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。