如何正确注释缓存的mixin

Question

export function Mixin(base) {
  return class extends base {
    foo = "bar";
  }
}

class A extends Mixin(SuperClass) {

}

let a = new A;
a. // suggests foo

这很好用，但在我的情况下，SuperClass 通常是同一个构造函数，所以我认为实现缓存是个好主意。

let cache = new Map();
export function Mixin(base) {
  if (!cache.has(base)) {
    cache.set(base, class extends base {
      foo = "bar";
    })
  }
  return cache.get(base);
}

class A extends Mixin(SuperClass) {

}

let a = new A;
a. // no longer suggests foo

因此，为了恢复自动完成功能，我将操作拆分为两个功能。

let cache = new Map();

function Mixin(base) {
  return class extends base {
    foo = "bar";
  }
}

/** 
 * @returns {ReturnType<Mixin>} 
 */
export function Cached(base) {
  if (!cache.has(base)) {
    cache.set(base, Mixin(base));
  }

  return cache.get(base);
}

class A extends Cached(HTMLElement) {}

let a = new A();

a. // suggests foo
a.inn // does not suggest innerHTML

如何注释Cached 的返回值，使其知道它将扩展base？

我正在考虑以下内容，只是无法弄清楚正确的语法是什么：

/** 
 * @param {T} base
 * @returns {ReturnType<Mixin> extends T} 
 */
export function Cached(base) {

Answer 1

cache 具有隐式类型 Map<any, any>，它不会推断任何其他类型，因为 JavaScript 过于宽松，IDE 无法通过解析其余代码（即使您使用的是 ES6 模块并且未导出 cache）。

如果您不想仅仅为了打字而更改实现，最好的选择是使用TypeScript 或JSDoc type assertions

这是一个最小的例子：

let cache = new Map();

/**
 * 
 * @param {*} base 
 * @return {typeof mixin}
 */
export function Mixin(base) {
    /**
    * @alias mixin
    */
    const mixin = class extends base {
        foo = "bar";
    }

    if (!cache.has(base)) {
        cache.set(base, mixin);
    }

    return cache.get(base);
}

class A extends Mixin(SuperClass) {

}

let a = new A;

a. // suggests foo

Answer 2

所以这让我又一次尝试成功地在我身边自动完成。 但是，我必须将 cache 包装到一个范围内，如下所示：

class Foo {
    foo = 'bar';
    fooooooo = 'baaaaaaar';
}

class ClassMaker {
    static _cache = new Map();

    /**
     *
     * @param base
     * @return {Foo}
     */
    static getFromBase(base) {
        if (!ClassMaker._cache.has(base)) {
            ClassMaker._cache[base] = class extends base {
            };
            ClassMaker._cache[base].__proto__ = Foo.__proto__;
        }

        return ClassMaker._cache[base];
    }
}

class Baz {
    baz = 'bar';
}

class Unrelated {
    foooooNotCompletedForReference = 'asd';
}

let a = ClassMaker.getFromBase(Baz);

事情事情会自动完成。另请注意，它不只是显示飞来飞去的每个符号，即 Unrelated 类不会填充到自动完成帮助器中。

但是请注意，JavaScript 不是类型化的，如果您想使用这些功能，最好使用 TypeScript 或 Dart。 JavaScript 中的所有这些自动建议只能通过使用其他工具分析书面代码来尽最大努力。它们会有缺陷，而且无论如何都无法保证。