javascript - 转换类类型并调用静态属性

Question

我正在一个 javascript 项目中使用 jsdoc/typescript验证并且在转换类型时遇到问题，然后使用它的静态属性。

使用导入类型时，我遇到以下问题:

// @ts-check -- foo.js
export default class Foo {
    static bar() {}
}

// @ts-check -- bar.js

/** @typedef {import('./foo').default} Foo */

const HopefullyFoo = /** @type {unknown} */ ('Foo');

const foo = /** @type {typeof Foo} */ (HopefullyFoo);

foo.bar();

输出:

src/components/bar.js:7:31 - error TS2693: 'Foo' only refers to a type, but is being used as a value here.

7 const foo = /** @type {typeof Foo} */ (HopefullyFoo);
                                ~~~

如果我将所有内容都放在一个文件中似乎没问题:

// @ts-check

class Foo {
    static bar() {}
}

const LikelyFoo = /** @type {unknown} */ ('Foo');

const foo = /** @type {typeof Foo} */ (LikelyFoo);

foo.bar();

// No errors

如果我不转换为 typeof，我会收到此错误，所以我认为这也不正确。

// @ts-check

class Foo {
    static bar() {

    }
}

const LikelyFoo = Foo;

const foo = /** @type {Foo} */ (LikelyFoo);

foo.bar();

输出

src/components/foo.js:13:5 - error TS2576: Property 'bar' is a static member of type 'Foo'

13 foo.bar();
       ~~~

这可能吗？

Answer 1

类的类型是由该类的构造函数创建的对象将具有的类型。此类型仅包含实例级字段，这就是您正确使用 typeof 运算符的原因。问题是运算符不能应用于类型，而是需要一个值。正常导入情况下

import Foo from "./foo";

您可以获得类型和值(构造函数)，但在 jsdoc 导入的情况下，您只能获得类型。因此，如果由于某种原因无法导入实际值，您可以在类定义旁边添加 typeof Foo 的别名:

foo.js

// @ts-check -- foo.js
export default class Foo {
  static bar() {}
}
/** @typedef {typeof Foo} FooCtor */

然后使用它

// @ts-check -- bar.js

/** @typedef {import('./foo').FooCtor} FooCtor */

const HopefullyFoo = /** @type {unknown} */ ('Foo');

const foo = /** @type {FooCtor} */ (HopefullyFoo);

foo.bar();

PS:说实话，我从来没有见过这样使用 TS，所以我可能是错的。