为 jsdoc 编写类声明

Question

我编写了一个简单的类和它的声明。然后我使用jsdoc指定lib的类型。

// index.ts
class VjsccXX {
  el: HTMLElement
  text: string
  show: boolean

  constructor(el: HTMLElement, text: string, show = true) {
    this.el = el
    this.text = text
    this.show = show

    this.el.classList.add('vjsscc-xx')

    if (!show) {
      this.el.style.display = 'none'
    }

    console.log('xx is ready')
  }
  hide() {
    this.el.style.display = 'none'
  }
  tex() {
    this.el.innerHTML = this.text
  }
}

export default VjsccXX

// index.d.ts
declare class VjsccXX {
  el: HTMLElement
  text: string
  show: boolean
  hide(): void
  tex(): void
  constructor(el: HTMLElement, text: string, show?: boolean)
}

export = VjsccXX

// test.js
/** @type {import('..')} */
const VjsccXX = window.VjsccXX

但如上图所示，VjsccXX 变成了一个实例而不是一个类。那么该如何处理呢？

======================= 一些更新 ========================= =

上面显示的图像使用 window.VjsccXX 因为它的 html 文件包含一个 umd 包。它的类型不正确，因为 VjsccXX 应该是类构造函数而不是具有原型属性的类实例。

然后我编写另一个 ts 文件来查看其类型：

也许我可以这样写？

======================= 另一个更新========================= ===

也可与 cjs 配合使用：

也许是jsdoc的问题？

Answer 1

我认为你需要的是在这里使用 typeof ：

// test.js
/** @type {typeof import('..')} */
const VjsccXX = window.VjsccXX

Answer 2

在 index.d.ts 中创建接口而不是类声明怎么样？

// index.d.ts
export interface IVjsccXX {
  el: HTMLElement;
  text: string;
  show: boolean;
  hide(): void;
  tex(): void;
}

然后你可以在jsdocs中使用它：

// test.js
/** @type {import('..').IVjsccXX} */
const VjsccXX = window.VjsccXX;

但是，TS中接口的构造函数处理对我来说是一团糟，如果有兴趣你可以参考具有构造签名的接口如何工作？了解详细信息。