CODEWITHSUNDEEP
typescriptclassdeclarationjsdoc
GuangWu
GuangWu

Reputation: 478

Write class declaration for jsdoc

I write a simple class and a declaration for it. Then I use jsdoc to specify the type of 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

enter image description here

But as the photo shown above, VjsccXX become a instance rather than a class. So how to deal with it?


======================= Some Update ==========================

The image shown above use a window.VjsccXX because its html file include a umd bundle. And its type is not right because VjsccXX should be a class constructor rather than a class instance which has prototype properties.

Then I write another ts file to see its type:

enter image description here

Maybe I could write like that?

======================= Another update ============================

Also work with cjs:

enter image description here

enter image description here

enter image description here

Maybe it is the problem of jsdoc?

Upvotes: 1

Views: 1341

Answers (2)

Evi Song
Evi Song

Reputation: 882

What about creating an interface instead of a class declaration in index.d.ts?

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

Then you may use it in jsdocs:

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

However, the constructor handling for interfaces in TS is a mess to me, if interested you may refer to How does interfaces with construct signatures work? for details.

Upvotes: 0

Ben
Ben

Reputation: 1371

I think what you need is to use typeof here:

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

Upvotes: 1

Related Questions