:『Type Script中国語入門教程』10、混入

著作権
記事の転載先:https://github.com/zhongsp
上記のWebサイトに直接ジャンプして最新バージョンを表示することをお勧めします.
紹介する
従来のオブジェクト向け継承方式に加えて、再利用可能なコンポーネントによってクラスを作成する方法として、別の単純なクラスを結合するコードが流行しています.Scalaなどの言語でmixinsとその特性に詳しいかもしれませんが、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); //////////////////////////////////////// // 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]; }) }); } 

この例を理解する
コードにはまず2つのクラスが定義され、mixinsとして使用されます.各クラスには、特定の動作または機能が1つしか定義されていないことがわかります.後でこれらを使用して、新しいクラスを作成します.この2つの機能があります.

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

次に、この2つのmixinsを組み合わせたクラスを作成します.次に、具体的にどのように操作されているかを見てみましょう.

class SmartObject implements Disposable, Activatable { 

まず、extendsではなくimplementsを使用していることに注意してください.クラスはインタフェースとして扱われ,実装ではなくDisposableとActivvatableのタイプのみが用いられる.これは、クラス内でインタフェースを実装する必要があることを意味します.しかし、これは私たちがmixinを使うときに避けたいことです.
mixinを入力する属性メソッドのために占有属性を作成する目的を達成することができます.これは、コンパイラのメンバーが実行時に使用可能であることを示します.これによりmixinがもたらす便利さが利用でき,占有属性を事前に定義する必要があるとはいえ.

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

最後に,定義したクラスにmixinsを混入し,全実装部分を完了する.

applyMixins(SmartObject, [Disposable, Activatable])

最後に、このヘルプ関数を作成して、混入操作を手伝ってください.mixins上のすべての属性を遍歴し、ターゲットにコピーし、前の占有属性を真の実装コードに置き換えます.

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