为 jsdoc 写 class 声明

Question

我写了一个简单的 class 和一个声明。然后我用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变成了实例而不是class。那么如何处理呢？

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

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

那我再写一个ts文件看看它的类型：

也许我可以这样写？

=======================再次更新==================== ========

也适用于 cjs:

可能是jsdoc的问题？

Answer 1

我想你需要的是在这里使用 typeof:

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

Answer 2

如何在 index.d.ts 中创建一个接口而不是 class 声明？

// 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;

但是，constructor TS 中接口的处理对我来说是一团乱麻，有兴趣的可以参考How does interfaces with construct signatures work?了解详情。

为 jsdoc 写 class 声明

Write class declaration for jsdoc

class

declaration

jsdoc

typescript