typescript: จะขยายสองชั้นได้อย่างไร?

ฉันต้องการประหยัดเวลาและใช้โค้ดทั่วไปซ้ำในชั้นเรียนซึ่งขยายคลาส PIXI (ไลบรารีตัวแสดงผล webGl 2d)

การเชื่อมต่อวัตถุ:

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วัตถุเองในทรัพย์สินของตน

ลองมาเป็นตัวอย่างกับ Texture นี่คือ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 ที่มีประสบการณ์ที่นี่ต้องเป็นไปได้ที่จะทำ แต่ไม่ใช่โดยการขยายหลายครั้งเนื่องจากสามารถทำได้เพียงครั้งเดียวในเวลานั้นฉันไม่พบวิธีแก้ปัญหาอื่นใด

มีคุณลักษณะที่รู้จักกันเล็กน้อยใน TypeScript ที่ช่วยให้คุณสามารถใช้ Mixins เพื่อสร้างวัตถุขนาดเล็กที่ใช้ซ้ำได้ คุณสามารถเขียนสิ่งเหล่านี้เป็นวัตถุขนาดใหญ่โดยใช้การสืบทอดหลายรายการ (ไม่อนุญาตให้มีการสืบทอดหลายรายการสำหรับคลาส แต่อนุญาตให้ใช้สำหรับมิกซ์อินซึ่งเป็นเหมือนอินเทอร์เฟซที่มีการดำเนินการที่เกี่ยวข้อง)

ข้อมูลเพิ่มเติมเกี่ยวกับ TypeScript Mixins

ฉันคิดว่าคุณสามารถใช้เทคนิคนี้เพื่อแบ่งปันส่วนประกอบทั่วไประหว่างคลาสต่างๆในเกมของคุณและเพื่อใช้ส่วนประกอบเหล่านี้ซ้ำจากคลาสเดียวในเกมของคุณ:

นี่คือตัวอย่าง 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/

วิธีนี้ดีกว่าแนวทาง "applyMixins" ที่ Fenton อธิบายไว้เนื่องจากคอมไพเลอร์อัตโนมัติจะช่วยคุณและแสดงวิธีการ / คุณสมบัติทั้งหมดจากคลาสการสืบทอดทั้งพื้นฐานและที่ 2

วิธีการนี้อาจจะมีการตรวจสอบในเว็บไซต์ของทีเอสสนามเด็กเล่น

นี่คือการใช้งาน:

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 ไม่รองรับการสืบทอดหลายรายการ ดังนั้นจึงไม่มีคำตอบที่ไม่สำคัญคุณอาจต้องปรับโครงสร้างโปรแกรมของคุณใหม่

คำแนะนำบางประการมีดังนี้

• หากคลาสเพิ่มเติมนี้มีพฤติกรรมที่คลาสย่อยหลายคลาสของคุณใช้ร่วมกันคุณควรแทรกคลาสนั้นลงในลำดับชั้นของคลาสโดยอยู่ด้านบนสุด บางทีคุณอาจได้รับ superclass ทั่วไปของ Sprite, Texture, Layer, ... จากคลาสนี้? นี่จะเป็นทางเลือกที่ดีหากคุณสามารถหาจุดที่ดีในประเภท hirarchy ได้ แต่ฉันไม่อยากแนะนำให้ใส่คลาสนี้แบบสุ่ม การถ่ายทอดทางพันธุกรรมเป็นการแสดงออกถึงความสัมพันธ์แบบ "คือ -" เช่นสุนัขเป็นสัตว์เนื้อสัมผัสเป็นตัวอย่างของคลาสนี้ คุณคงต้องถามตัวเองว่าสิ่งนี้จำลองความสัมพันธ์ระหว่างวัตถุในโค้ดของคุณจริงๆหรือไม่ ต้นไม้มรดกทางตรรกะมีค่ามาก

• ถ้าคลาสเพิ่มเติมไม่พอดีกับลำดับชั้นของชนิดคุณสามารถใช้การรวม นั่นหมายความว่าคุณเพิ่มตัวแปรอินสแตนซ์ของประเภทของคลาสนี้ลงในซูเปอร์คลาสทั่วไปของ Sprite, Texture, Layer, ... จากนั้นคุณสามารถเข้าถึงตัวแปรด้วย getter / setter ในคลาสย่อยทั้งหมด โมเดล "มี - ความสัมพันธ์"

• คุณยังสามารถแปลงชั้นเรียนของคุณเป็นอินเทอร์เฟซ จากนั้นคุณสามารถขยายอินเทอร์เฟซกับคลาสทั้งหมดของคุณได้ แต่จะต้องใช้วิธีการอย่างถูกต้องในแต่ละคลาส ซึ่งหมายถึงความซ้ำซ้อนของรหัส แต่ในกรณีนี้ไม่มากนัก

คุณต้องตัดสินใจด้วยตัวเองว่าคุณชอบแนวทางไหนที่สุด โดยส่วนตัวแล้วฉันอยากจะแนะนำให้แปลงคลาสเป็นอินเทอร์เฟซ

เคล็ดลับอย่างหนึ่ง: typescript เสนอคุณสมบัติซึ่งเป็นน้ำตาลที่เป็นประโยคสำหรับ getters และ setters คุณอาจต้องการดูสิ่งนี้: http://blogs.microsoft.co.il/gilf/2013/01/22/creating-properties-in-typescript/

TypeScript รองรับมัณฑนากรและการใช้คุณสมบัตินั้นร่วมกับไลบรารีเล็ก ๆ ที่เรียกว่าtypescript-mixคุณสามารถใช้ mixins เพื่อให้มีการสืบทอดหลาย ๆ บรรทัดได้

// 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

วิธีแก้ปัญหาที่แฮ็คมากคือการวนซ้ำคลาสที่คุณต้องการสืบทอดจากการเพิ่มฟังก์ชั่นทีละฟังก์ชันในคลาสหลัก

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);

ในรูปแบบการออกแบบมีหลักการที่เรียกว่า "การจัดองค์ประกอบที่ชอบมากกว่าการสืบทอด" มันบอกว่าแทนการสืบทอดจากคลาส B Class A ใส่ตัวอย่างของชั้นภายในชั้น B เป็นทรัพย์สินและจากนั้นคุณสามารถใช้ฟังก์ชันของชั้นภายในชั้น B. คุณสามารถดูตัวอย่างบางส่วนของที่นี่และที่นี่