ES6 代码完成 (Intellisense) 与 VSCode 中的组合答案

【问题标题】：ES6 code completion (Intellisense) with composition in VSCodeES6 代码完成 (Intellisense) 与 VSCode 中的组合
【发布时间】：2019-08-22 14:41:48
【问题描述】：

我正在尝试使用以下语法在 es6 中嵌套类时使代码完成工作：class Dog extends FoodMixin(Animal)。第一个实现工作正常，让我自动完成 FoodMixin 和 Animal。但是，如果我将其嵌套更深，或应用第二个 mixin，则自动完成将停止。例如：class Dog extends OtherMixin(FoodMixin(Animal)) 将丢失 FoodMixin 类的代码补全。

有没有一种方法可以让智能感知同时适用于 OtherMixin 和 FoodMixin？

简单测试代码：

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

【问题讨论】：

不是您问题的直接答案，但对于不以这种方式使用继承可能有一些话要说。像这样的继承链通常会导致代码难以测试和维护。如果您有兴趣进一步学习，这里有很多关于组合与继承的文献。
我建议你永远不要像上面的例子那样写代码。您正在尝试以 vscode 和人类难以理解的方式混合组合和继承。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@Peter Gotcha，这意味着我遵循的以下教程建议了不良做法：alligator.io/js/class-composition ？如果是这样，我将如何使用支持智能感知的 ES6 遵循组合模式？我似乎找不到好的教程..

标签： javascript ecmascript-6 visual-studio-code intellisense composition

【解决方案1】：

VS Code 的 JavaScript IntelliSense 将无法理解像该示例那样非常动态的代码。您链接到的教程提供了此代码，对于它自己（或实际上任何人）的好处来说太聪明了。

但是，您可以通过使用 JSDoc 为示例中使用的类型和接口添加显式类型注释来解决 VS Code 的限制：

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

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

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

& 不是标准的 JS Doc 类型语法，而是来自 TypeScript 的 intersection type。（我在这里使用它是因为它模仿了构图）

【讨论】：