Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript jsdoc for interface properties

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, */;
}
like image 269
Mike Crowe Avatar asked Oct 25 '19 13:10

Mike Crowe


People also ask

Can you use JSDoc with TypeScript?

You can use most JSDoc type syntax and any TypeScript syntax, from the most basic like string to the most advanced, like conditional types.

Why should I use JSDoc?

JsDoc provides two types of tags: block tags and inline tags. Block tags provide means to annotate variables, functions, arguments, modules, namespaces, return types, and classes and describe what a specific code snippet does. These could be types, arguments, callbacks, modules, namespaces, etc.

How do you access the value of interface in TypeScript?

In Typescript, we can access the value of the property of an interface using brackets. For instance, the following code works perfectly. function updateDate(post: BlogPost, value: BlogPost["publishDate"]): boolean { if (! post.

CAN interface have function definition TypeScript?

TypeScript Interface can be used to define a function type by ensuring a function signature. We use the optional property using a question mark before the property name colon. This optional property indicates that objects belonging to the Interface may or may not have to define these properties.


1 Answers

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)

like image 66
Matt Bierner Avatar answered Oct 04 '22 19:10

Matt Bierner