No autocompletions for Parent class when using ES2015 mixins (function returning the Class)

[kasperpeulen]

Consider this code:

class Parent {
  parentMethod() {  }
}

const Mixin = Base => class Mixin extends Base {
  mixinMethod() {  }
}

class Child extends Mixin(Parent) {
  childMethod() {
    this.
  }
}

For the Child class, all three method are available, but typescript doesn't detect the parentMethod to be available.

[jwbay]

There may be a better way to do this, but the main problem is that Base is of type any for your mixin. If you give it a generic type so it can flow through, parent methods will show up.

type Constructable = new (...args) => any;

class Parent {
  parentMethod() {  }
}

const Mixin = <T extends Constructable>(Base: T) => class Mixin extends Base {
  mixinMethod() {  }
}

class Child extends Mixin(Parent) {
  childMethod() {
    this. // all three show up here in playground
  }
}

[kasperpeulen]

Nice! I tried to implement this using jsdoc syntax, but without luck, any ideas?

/** @typedef {new (...args) => any} Constructable */

class Parent {
  parentMethod() {  }
}

/**
 * @template T extends Constructable
 * @param {T} Base 
 */
const Mixin = (Base) => class Mixin extends Base {
  mixinMethod() {  }
}

class Child extends Mixin(Parent) {
  childMethod() {
    this. // still only two autocompletions
  }
}

[DanielRosenwasser]

I think the problem here is that TypeScript doesn't have a way of expressing constraints on type parameters in JSDoc.

In other words:

/**
 * @template T extends Constructable
 */

doesn't actually add a constraint.

@dimvar I see that you mentioned some work on bounded generics here for Closure. Any word on that?

[dimvar]

No progress on that yet.

[akdor1154]

Is there anywhere that "types I can describe in TS but not JSDoc" (such as this) are listed?

[ma2ciek]

Hi!

Did you achieve some progress on that field (I mean allowing constraints in the JSDoc @template)? It'd be really helpful as it would allow type checking JS code based on mixins (E.g. the https://github.com/ckeditor/ckeditor5 codebase).

In many scenarios, the previous approach (https://www.typescriptlang.org/docs/handbook/mixins.html) is not an option as it requires a massive code duplication (e.g. creating 15 fake properties and methods to satisfy interfaces).

[ma2ciek]

And I'd change the misleading title of the issue. When using --allowJs and --checkJs for the above code TS prints an error and there's no way to workaround it so IMO it's a bigger problem.

[RyanCavanaugh]

OP works in latest on Playground

[rampage1212]

@RyanCavanaugh
Please explain more details