转换类类型并调用静态属性答案

【问题标题】：Casting a class type and calling a static property转换类类型并调用静态属性
【发布时间】：2020-03-06 21:27:30
【问题描述】：

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

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

// @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();
       ~~~

这可能吗？

【问题讨论】：

我不明白你为什么觉得需要注释这些，因为编译器通常可以推断出类型。但是您的问题是您的导入语句。目前尚不清楚您是尝试从模块导入默认值，还是使用新的导入功能延迟加载，但无论哪种方式您都做错了，请参阅 mdn 上的相关文档。 import
这能回答你的问题吗？ Import Statements in ES6 from MDN docs
@JaredSmith 导入是 JSDoc/Typescript-ism，它不是您链接的标准导入
Not seeing anything like that here...
@JaredSmith 在该页面上查找包含 "import("./a").Pet" 的示例。

标签： javascript typescript jsdoc

【解决方案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：tbh，我从未见过这样使用 TS，所以我可能错了。

【讨论】：

感谢作品！谢谢...我自己永远也想不通。