VSCode中的ES6代码完成（Intellisense）

Question

I am trying to get code completion to work when nesting classes in es6 using the following syntax: class Dog extends FoodMixin(Animal) . The first implementation works fine, giving me auto completion for both FoodMixin and Animal. However, if I nest it one deeper, or apply a second mixin, the auto completion stops. For instance: class Dog extends OtherMixin(FoodMixin(Animal)) will lose the code completion for the FoodMixin class.

Is there a way I can have intellisense work for both OtherMixin and FoodMixin?

Simple test code:

const FoodMixin = superclass => class extends superclass {
    eat() {
        console.log("Eating");
    }
};

const OtherMixin = superclass => class extends superclass {
    test() {
        console.log("Hello");
    }
};

class Animal {
}

class Dog extends OtherMixin(FoodMixin(Animal)){
}

const dog = new Dog();
dog.test(); //INTELLISENSE WORKS
dog.eat(); //INTELLISENSE DOES NOT WORK

Answer 1

VS Code's JavaScript IntelliSense will not be able to understand very dynamic code like that example. The tutorial you linked to that provided this code is being too clever for its own (or really anyone's) good.

However you can sort of workaround VS Code's limitation by adding explicit type annotations for the types and interfaces used in the example using JSDoc:

/**
 * @typedef {{ eat(): void }} Eater
 */

/**
 * @typedef {{ test(): void }} Tester
 */

/**
 * @type {Dog & Eater & Tester}
 */
const dog = new Dog();
dog.

The & is not standard JS Doc type syntax but an intersection type from TypeScript. (I am using it here because it mimics composition)