TypeScript jsdoc for interface properties

Mike Crowe picture Mike Crowe · Oct 25, 2019 · Viewed 7.5k times · Source

I have a TypeScript interface with a single-character property name (a design constraint). I would like to use JSDoc to document this interface to help with auto-complete in vscode.

Here's the current interface:

export interface ISource {
    b: string
    d: string
    f: string
    h: string
    M: number
    L: number
    P: number
    n: string
    r: string
    u: string
    p: string
}

Non-working attempts are:

/**
* @typedef {object} ISource
* @property {string} ISource.b - Bias: bias_text[rating.bias[0]],
* @property {string} ISource.d - Domain: rating.domain.replace(/^www\./, ""),
* @property {string} ISource.f - FacebookUrl: _.lowerCase(rating.facebook_url),
* @property {string} ISource.h - Host: `https://${rating.domain}`,
* @property {number} ISource.M - MozRankUrl: rating.moz_rank_url,
* @property {number} ISource.L - MozLinks: rating.moz_links,
* @property {number} ISource.P - MozPopularity: rating.moz_popularity,
* @property {string} ISource.n - Source: rating.source,
* @property {string} ISource.r - Reporting: _.upperCase(_.kebabCase(_.first(rating.factual_reporting))),
* @property {string} ISource.u - Url: url,
* @property {string} ISource.p - Path: path,
*/

export interface ISource {
    b: string
    d: string
    f: string
    h: string
    M: number
    L: number
    P: number
    n: string
    r: string
    u: string
    p: string
}

and

export interface ISource {
    b: string /** @property {string} b - Bias: bias_text[rating.bias[0]], */;
    d: string /** @property {string} d - Domain: rating.domain.replace(/^www\./, ""), */;
    f: string /** @property {string} f - FacebookUrl: _.lowerCase(rating.facebook_url), */;
    h: string /** @property {string} h - Host: `https://${rating.domain}`, */;
    M: number /** @property {string} M - MozRankUrl: rating.moz_rank_url, */;
    L: number /** @property {string} L - MozLinks: rating.moz_links, */;
    P: number /** @property {string} P - MozPopularity: rating.moz_popularity, */;
    n: string /** @property {string} n - Source: rating.source, */;
    r: string /** @property {string} r - Reporting: _.upperCase(_.kebabCase(_.first(rating.factual_reporting))), */;
    u: string /** @property {string} u - Url: url, */;
    p: string /** @property {string} p - Path: path, */;
}

Answer

Matt Bierner picture Matt Bierner · Oct 28, 2019

Just put the doc comment before each property:

export interface ISource {
    /**
     * Bias: bias_text[rating.bias[0]],
     */
    b: string

    /**
     * Domain: `rating.domain.replace(/^www\./, "")`
     */
    d: string
    ...
}

(Also, don't use type annotations in JSDocs inside TS files; the compiler and tooling will ignore these types)