TypeScript mixin constrained to different classes

Question

I would like to build a mixin and have it so it can be applied to different classes (in this case "Sprite" and "Graphics").

Line three does not work:

function Animated<T extends Constructor<Sprite> | Constructor<Graphics>>(Base: T) {

TypeScript complains that "T is not a constructor function".

import { Sprite, Texture, Container, Graphics } from "pixi.js";

type Constructor<T = {}> = new (...args: any[]) => T;

function Animated<T extends Constructor<Sprite> | Constructor<Graphics>>(Base: T) {
  return class extends Base {
    constructor(...args) {
      super(...args);
    }

    animate() {
      console.log('animte it');
    }
  }
}

export class AnimatedSprite extends Animated(Sprite) {
  constructor(texture? : Texture) {
    super(texture);
  }
}

export class AnimatedContainer extends Animated(Graphics) {
  constructor(nativeLines?: boolean) {
    super(nativeLines);
  }
}

Wolfgang · Accepted Answer · 2018-11-24 16:35:50Z

0

Ok, found a solution:

export interface IAnimated {
    animate():void;
}

export const AnimatedSprite: Constructor<IAnimated> & typeof Sprite = <any>Animated(Sprite);
export const AnimatedGraphics: Constructor<IAnimated> & typeof Graphics = <any>Animated(Graphics);

Later (usage):

let s = new AnimatedSprite(someTexture); // has type "Sprite" and also interface IAnimated
let g = new AnimatedGraphics(false); // has type "Graphics" and also interface IAnimated

answered Nov 24, 2018 at 16:35

Wolfgang

2,3581 gold badge27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript mixin constrained to different classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related