Typescript：2つのクラスを拡張する方法は？

時間を節約し、PIXIクラス（2d webGlレンダラーライブラリ）を拡張するクラス間で共通のコードを再利用したいと思います。

オブジェクトインターフェイス：

module Game.Core {
    export interface IObject {}

    export interface IManagedObject extends IObject{
        getKeyInManager(key: string): string;
        setKeyInManager(key: string): IObject;
    }
}

私の問題は、コード内のことであるgetKeyInManagerとsetKeyInManager変更されませんし、私はないそれを複製し、それを再利用したい、ここでの実装は次のとおりです。

export class ObjectThatShouldAlsoBeExtended{
    private _keyInManager: string;

    public getKeyInManager(key: string): string{
        return this._keyInManager;
    }

    public setKeyInManager(key: string): DisplayObject{
        this._keyInManager = key;
        return this;
    }
}

私がやりたいのManager.add()は、マネージャーで使用されるキーを介して、オブジェクト自体の内部のオブジェクトをそのプロパティで参照するために自動的に追加することです_keyInManager。

それでは、テクスチャの例を見てみましょう。ここに行きますTextureManager

module Game.Managers {
    export class TextureManager extends Game.Managers.Manager {

        public createFromLocalImage(name: string, relativePath: string): Game.Core.Texture{
            return this.add(name, Game.Core.Texture.fromImage("/" + relativePath)).get(name);
        }
    }
}

私がそうするときthis.add()、私はGame.Managers.Manager add()メソッドがによって返されるオブジェクトに存在するであろうメソッドを呼び出すことを望みますGame.Core.Texture.fromImage("/" + relativePath)。このオブジェクトは、この場合はTexture：になります。

module Game.Core {
    // I must extends PIXI.Texture, but I need to inject the methods in IManagedObject.
    export class Texture extends PIXI.Texture {

    }
}

これIManagedObjectはインターフェースであり、実装を含めることはできませんが、クラスをクラスObjectThatShouldAlsoBeExtended内に挿入するために何を書くべきかわかりませんTexture。同じプロセスをするために必要とされるであろうことを知ってSprite、TilingSprite、Layerおよびより。

ここには経験豊富なTypeScriptフィードバック/アドバイスが必要です。それは可能である必要がありますが、一度に1つしか不可能であるため、複数の拡張ではなく、他の解決策は見つかりませんでした。

TypeScriptには、ミックスインを使用して再利用可能な小さなオブジェクトを作成できる、あまり知られていない機能があります。多重継承を使用して、これらをより大きなオブジェクトに構成できます（クラスでは多重継承は許可されていませんが、ミックスインでは許可されています。これは、関連する実装を持つインターフェイスのようなものです）。

TypeScriptミックスインの詳細

この手法を使用して、ゲーム内の多くのクラス間で共通のコンポーネントを共有し、ゲーム内の1つのクラスからこれらのコンポーネントの多くを再利用できると思います。

これがMixinsの簡単なデモです...まず、ミックスしたいフレーバー：

class CanEat {
    public eat() {
        alert('Munch Munch.');
    }
}

class CanSleep {
    sleep() {
        alert('Zzzzzzz.');
    }
}

次に、Mixin作成の魔法の方法（これはプログラムのどこかで一度だけ必要です...）

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

そして、ミックスインフレーバーから多重継承するクラスを作成できます。

class Being implements CanEat, CanSleep {
        eat: () => void;
        sleep: () => void;
}
applyMixins (Being, [CanEat, CanSleep]);

このクラスには実際の実装はないことに注意してください。「インターフェース」の要件を満たすのに十分です。しかし、このクラスを使用すると、すべて機能します。

var being = new Being();

// Zzzzzzz...
being.sleep();

そこで説明されている新しいミックスインアプローチを使用することをお勧めします：https：//blogs.msdn.microsoft.com/typescript/2017/02/22/announcing-typescript-2-2/

このアプローチは、Fentonによって説明されている「applyMixins」アプローチよりも優れています。オートコンパイラが、基本クラスと2番目の継承クラスの両方からのすべてのメソッド/プロパティを表示するのに役立つからです。

このアプローチは、TSPlaygroundサイトで確認できます。

実装は次のとおりです。

class MainClass {
    testMainClass() {
        alert("testMainClass");
    }
}

const addSecondInheritance = (BaseClass: { new(...args) }) => {
    return class extends BaseClass {
        testSecondInheritance() {
            alert("testSecondInheritance");
        }
    }
}

// Prepare the new class, which "inherits" 2 classes (MainClass and the cass declared in the addSecondInheritance method)
const SecondInheritanceClass = addSecondInheritance(MainClass);
// Create object from the new prepared class
const secondInheritanceObj = new SecondInheritanceClass();
secondInheritanceObj.testMainClass();
secondInheritanceObj.testSecondInheritance();

残念ながら、typescriptは多重継承をサポートしていません。したがって、完全に些細な答えはありません。おそらくプログラムを再構築する必要があります。

ここにいくつかの提案があります：

• この追加のクラスに、多くのサブクラスが共有する動作が含まれている場合は、それをクラス階層の最上位のどこかに挿入するのが理にかなっています。たぶん、このクラスからスプライト、テクスチャ、レイヤーなどの一般的なスーパークラスを派生させることができますか？hirarchyタイプで良い場所を見つけることができれば、これは良い選択でしょう。ただし、このクラスをランダムな場所に挿入することはお勧めしません。継承は「Isa-関係」を表します。たとえば、犬は動物であり、テクスチャはこのクラスのインスタンスです。これが実際にコード内のオブジェクト間の関係をモデル化しているかどうかを自問する必要があります。論理継承ツリーは非常に価値があります

• 追加のクラスが型階層に論理的に適合しない場合は、集約を使用できます。つまり、このクラスのタイプのインスタンス変数を、スプライト、テクスチャ、レイヤーなどの共通のスーパークラスに追加します。その後、すべてのサブクラスのゲッター/セッターを使用して変数にアクセスできます。これは「Hasa-relationship」をモデル化したものです。

• クラスをインターフェースに変換することもできます。次に、すべてのクラスでインターフェイスを拡張できますが、各クラスでメソッドを正しく実装する必要があります。これは、コードの冗長性を意味しますが、この場合はそれほど多くありません。

どのアプローチが一番好きかを自分で決める必要があります。個人的には、クラスをインターフェースに変換することをお勧めします。

ヒント：Typescriptは、ゲッターとセッターの構文糖衣構文であるプロパティを提供します。あなたはこれを見たいかもしれません：http：//blogs.microsoft.co.il/gilf/2013/01/22/creating-properties-in-typescript/

TypeScriptはデコレータをサポートしており、その機能とtypescript-mixと呼ばれる小さなライブラリを使用すると、ミックスインを使用して、わずか数行で多重継承を行うことができます。

// The following line is only for intellisense to work
interface Shopperholic extends Buyer, Transportable {}

class Shopperholic {
  // The following line is where we "extend" from other 2 classes
  @use( Buyer, Transportable ) this 
  price = 2000;
}

確かな型安全性とスケーラビリティを可能にする、はるかに優れたアプローチがあると思います。

まず、ターゲットクラスに実装するインターフェイスを宣言します。

interface IBar {
  doBarThings(): void;
}

interface IBazz {
  doBazzThings(): void;
}

class Foo implements IBar, IBazz {}

次に、実装をFooクラスに追加する必要があります。これらのインターフェースも実装するクラスミックスインを使用できます。

class Base {}

type Constructor<I = Base> = new (...args: any[]) => I;

function Bar<T extends Constructor>(constructor: T = Base as any) {
  return class extends constructor implements IBar {
    public doBarThings() {
      console.log("Do bar!");
    }
  };
}

function Bazz<T extends Constructor>(constructor: T = Base as any) {
  return class extends constructor implements IBazz {
    public doBazzThings() {
      console.log("Do bazz!");
    }
  };
}

Fooクラスミックスインを使用してクラスを拡張します。

class Foo extends Bar(Bazz()) implements IBar, IBazz {
  public doBarThings() {
    super.doBarThings();
    console.log("Override mixin");
  }
}

const foo = new Foo();
foo.doBazzThings(); // Do bazz!
foo.doBarThings(); // Do bar! // Override mixin

非常にハッキーな解決策は、新しい親クラスに関数を1つずつ追加することで継承するクラスをループすることです。

class ChildA {
    public static x = 5
}

class ChildB {
    public static y = 6
}

class Parent {}

for (const property in ChildA) {
    Parent[property] = ChildA[property]
}
for (const property in ChildB) {
    Parent[property] = ChildB[property]
}


Parent.x
// 5
Parent.y
// 6

すべてのプロパティChildAとはChildB、今からアクセスすることができますParentが、彼らは次のような警告を受けるという意味を認識されません、クラスProperty 'x' does not exist on 'typeof Parent'

最新の比類のないソリューションを見つけました：https：//www.npmjs.com/package/ts-mixer

ここにはすでに多くの良い答えがありますが、拡張されているクラスに機能を追加できる例を示したいと思います。

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

class Class1 {
    doWork() {
        console.log('Working');
    }
}

class Class2 {
    sleep() {
        console.log('Sleeping');
    }
}

class FatClass implements Class1, Class2 {
    doWork: () => void = () => { };
    sleep: () => void = () => { };


    x: number = 23;
    private _z: number = 80;

    get z(): number {
        return this._z;
    }

    set z(newZ) {
        this._z = newZ;
    }

    saySomething(y: string) {
        console.log(`Just saying ${y}...`);
    }
}
applyMixins(FatClass, [Class1, Class2]);


let fatClass = new FatClass();

fatClass.doWork();
fatClass.saySomething("nothing");
console.log(fatClass.x);

デザインパターンには、「継承よりも構成を優先する」という原則があります。クラスAからクラスBを継承する代わりに、クラスAのインスタンスをクラスB内にプロパティとして配置すると、クラスAの機能をクラスB内で使用できるようになります。こことここでその例をいくつか見ることができます。