Typescript: How to extend two classes?

by

There is a little known feature in TypeScript that allows you to use Mixins to create re-usable small objects. You can compose these into larger objects using multiple inheritance (multiple inheritance is not allowed for classes, but it is allowed for mixins – which are like interfaces with an associated implenentation).

More information on TypeScript Mixins

I think you could use this technique to share common components between many classes in your game and to re-use many of these components from a single class in your game:

Here is a quick Mixins demo… first, the flavours that you want to mix:

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

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

Then the magic method for Mixin creation (you only need this once somewhere in your program…)

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

And then you can create classes with multiple inheritance from mixin flavours:

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

Note that there is no actual implementation in this class – just enough to make it pass the requirements of the “interfaces”. But when we use this class – it all works.

var being = new Being();

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

More Related Contents:

  1. Typescript: can not access member value in inherited class constructor
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. The value of “this” within the handler using addEventListener
  6. JavaScript: Class.method vs. Class.prototype.method
  7. Understanding prototypal inheritance in JavaScript
  8. Calling webpacked code from outside (HTML script tag)
  9. JavaScript private methods
  10. Angular: Can’t find Promise, Map, Set and Iterator
  11. Typescript recursive function composition
  12. typescript – cloning object
  13. What’s the difference between “declare class” and “interface” in TypeScript
  14. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  15. Define Private field Members and Inheritance in JAVASCRIPT module pattern
  16. Cannot invoke an expression whose type lacks a call signature
  17. Optional chaining on the left side in Javascript
  18. How to Pass data from child to parent component Angular
  19. spread operator vs array.concat()
  20. typescript: error TS2693: ‘Promise’ only refers to a type, but is being used as a value here
  21. Angular interceptor exclude specific urls
  22. How can I loop through enum values for display in radio buttons? [duplicate]
  23. TypeScript enum to object array
  24. How to iterate using ngFor loop Map containing key as string and values as map iteration
  25. How do I split a TypeScript class into multiple files?
  26. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  27. How to access a method from a class from another class?
  28. Determine if a CSS class exists with Javascript
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. Declare an array in TypeScript

Leave a Comment