TypeScript unable to identify the properties shared among mixins

[AnmSaiful]

TypeScript Version: 4.0.2

Search Terms: mixins, inheritance

Code

type Mixable = new (...args: any[]) => {};

class Base {
  constructor(protected _a: string, protected _b: string) {}
}

const A = (Base: Mixable) => class A extends Base {
  a() {
    console.log(this._a);
    return this;
  }
};

const B = (Base: Mixable) => class B extends Base {
  b() {
    console.log(this._b);
    return this;
  }
};

const C = A(B(Base));

const o = new C("a","b");

o.a().b();

Expected behavior: The compiler should be able to identify the properties shared among mixins, and should not emit any error.

Actual behavior: TypeScript emit errors that it does not able to identify the shared properties, and also failed to chain methods.

Playground Link: https://bit.ly/34q5ueS

Note: If you run this, it runs successfully, and generates the expected output without any JS error.

[ENvironmentSet]

It seems not a problem of typescript.

1. You can't access _a or _b in class A and B since only some instance of Base(variable that typed as Mixable) would have them. (e.g class noop {} is value of Mixable type.)
2. If you don't use generic to represent Base in A and B, typescript would only care the case when Base is value of Mixable. So you must use generic in this case.

type Mixable = new (...args: any[]) => {};

class Base {
  constructor(protected _a: string, protected _b: string) {}
}

const A = <T extends Mixable>(Base: T) => class A extends Base {
  a() {
    return this;
  }
};

const B = <T extends Mixable>(Base: T) => class B extends Base {
  b() {
    return this;
  }
};

const C = A(B(Base));

const o = new C("a","b");

o.a().b();

playground

[AnmSaiful]

@ENvironmentSet excellent! So the generic solved the chaining issue. Do you know any workaround to make the properties accessible to A and B?

[ENvironmentSet]

All you need just to make Mixable type more specific. (i.e. make return type of `Mixable have properties.)

P.S. there is some kind of design problem related to private/protected property of exported classes(classes like A and B).

[AnmSaiful]

Thanks, @ENvironmentSet for your contributions. It added a huge value to the issue.

My primary goal to use mixins is to decompose my large classes. As because this will be applied in different classes, I am creating a helper module. In order to keep the example understandable, I posted a simpler implementation.

So, here's what I've come up with so far keeping extensibility in mind. Please ignore the weird name Libbable (this is just to demonstrate the idea).

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

interface Libbable {
  x: string;
  a(): any;
}

type Mixin = Mixable<Libbable>;

class Lib {
  constructor(public x: string) {}
  a(): this { return this }
}

const A = <T extends Mixin>(Parent: T) => class extends Parent {
  a() {
    console.log(this.x);
    return this;
  }
};

const B = <T extends Mixin>(Parent: T) => class extends Parent {
  b() {
    return this.a();
  }
};

const L = A(B(Lib));
const o = new L("x");

o.a().b();

Link to the Playground

Because of the design issue you mentioned, TypeScript is not able to share non-public properties among mixins. I really look forward to being able to use this, otherwise, the powerful access modifiers are simply useless here.

As it is necessary to declare the methods in the Base class to use them in the mixins, they will be gets called once the applicable class methods of the mixins are called. This is not what I want to happen. JS allows us to get rid of this, but TS doesn't. If you have a better idea to achieve what I want, feel free to share.

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.