The list below outlines which constructs are currently supported when using JSDoc annotations to provide type information in JavaScript files.

Note any tags which are not explicitly listed below (such as @async) are not yet supported.

class extensions

The meaning is usually the same, or a superset, of the meaning of the tag given at jsdoc.app. The code below describes the differences and gives some example usage of each tag.

Note: You can use the playground to explore JSDoc support.

@type

You can use the “@type” tag and reference a type name (either primitive, defined in a TypeScript declaration, or in a JSDoc “@typedef” tag). You can use most JSDoc types and any TypeScript type, from the most basic like string to the most advanced, like conditional types.

  1. /**
     * @type {string}
     */
    var s;
  2. /** @type {Window} */
    var win;
  3. /** @type {PromiseLike<string>} */
    var promisedString;
  4. // You can specify an HTML Element with DOM properties
    /** @type {HTMLElement} */
    var myElement = document.querySelector(selector);
    element.dataset.myData = "";

@type can specify a union type — for example, something can be either a string or a boolean.

  1. /**
     * @type {(string | boolean)}
     */
    var sb;

Note that parentheses are optional for union types.

  1. /**
     * @type {string | boolean}
     */
    var sb;

You can specify array types using a variety of syntaxes:

  1. /** @type {number[]} */
    var ns;
    /** @type {Array.<number>} */
    var nds;
    /** @type {Array<number>} */
    var nas;

You can also specify object literal types. For example, an object with properties ‘a’ (string) and ‘b’ (number) uses the following syntax:

  1. /** @type {{ a: string, b: number }} */
    var var9;

You can specify map-like and array-like objects using string and number index signatures, using either standard JSDoc syntax or TypeScript syntax.

  1. /**
     * A map-like object that maps arbitrary `string` properties to `number`s.
     *
     * @type {Object.<string, number>}
     */
    var stringToNumber;
  2. /** @type {Object.<number, object>} */
    var arrayLike;

The preceding two types are equivalent to the TypeScript types { [x: string]: number } and { [x: number]: any }. The compiler understands both syntaxes.

You can specify function types using either TypeScript or Closure syntax:

  1. /** @type {function(string, boolean): number} Closure syntax */
    var sbn;
    /** @type {(s: string, b: boolean) => number} TypeScript syntax */
    var sbn2;

Or you can just use the unspecified Function type:

  1. /** @type {Function} */
    var fn7;
    /** @type {function} */
    var fn6;

Other types from Closure also work:

  1. /**
     * @type {*} - can be 'any' type
     */
    var star;
    /**
     * @type {?} - unknown type (same as 'any')
     */
    var question;

Casts

TypeScript borrows cast syntax from Closure. This lets you cast types to other types by adding a @type tag before any parenthesized expression.

  1. /**
     * @type {number | string}
     */
    var numberOrString = Math.random() < 0.5 ? "hello" : 100;
    var typeAssertedNumber = /** @type {number} */ (numberOrString);

Import types

You can also import declarations from other files using import types. This syntax is TypeScript-specific and differs from the JSDoc standard:

  1. // @filename: types.d.ts
    export type Pet = {
      name: string,
    };
  2. // @filename: main.js
    /**
     * @param { import("./types").Pet } p
     */
    function walk(p) {
      console.log(`Walking ${p.name}...`);
    }

import types can also be used in type alias declarations:

  1. /**
     * @typedef { import("./types").Pet } Pet
     */
  2. /**
     * @type {Pet}
     */
    var myPet;
    myPet.name;

import types can be used to get the type of a value from a module if you don’t know the type, or if it has a large type that is annoying to type:

  1. /**
     * @type {typeof import("./accounts").userAccount }
     */
    var x = require("./accounts").userAccount;

@param and @returns

@param uses the same type syntax as @type, but adds a parameter name. The parameter may also be declared optional by surrounding the name with square brackets:

  1. // Parameters may be declared in a variety of syntactic forms
    /**
     * @param {string}  p1 - A string param.
     * @param {string=} p2 - An optional param (Closure syntax)
     * @param {string} [p3] - Another optional param (JSDoc syntax).
     * @param {string} [p4="test"] - An optional param with a default value
     * @return {string} This is the result
     */
    function stringsStringStrings(p1, p2, p3, p4) {
      // TODO
    }

Likewise, for the return type of a function:

  1. /**
     * @return {PromiseLike<string>}
     */
    function ps() {}
  2. /**
     * @returns {{ a: string, b: number }} - May use '@returns' as well as '@return'
     */
    function ab() {}

@typedef, @callback, and @param

@typedef may be used to define complex types. Similar syntax works with @param.

  1. /**
     * @typedef {Object} SpecialType - creates a new type named 'SpecialType'
     * @property {string} prop1 - a string property of SpecialType
     * @property {number} prop2 - a number property of SpecialType
     * @property {number=} prop3 - an optional number property of SpecialType
     * @prop {number} [prop4] - an optional number property of SpecialType
     * @prop {number} [prop5=42] - an optional number property of SpecialType with default
     */
  2. /** @type {SpecialType} */
    var specialTypeObject;
    specialTypeObject.prop3;

You can use either object or Object on the first line.

  1. /**
     * @typedef {object} SpecialType1 - creates a new type named 'SpecialType'
     * @property {string} prop1 - a string property of SpecialType
     * @property {number} prop2 - a number property of SpecialType
     * @property {number=} prop3 - an optional number property of SpecialType
     */
  2. /** @type {SpecialType1} */
    var specialTypeObject1;

@param allows a similar syntax for one-off type specifications. Note that the nested property names must be prefixed with the name of the parameter:

  1. /**
     * @param {Object} options - The shape is the same as SpecialType above
     * @param {string} options.prop1
     * @param {number} options.prop2
     * @param {number=} options.prop3
     * @param {number} [options.prop4]
     * @param {number} [options.prop5=42]
     */
    function special(options) {
      return (options.prop4 || 1001) + options.prop5;
    }

@callback is similar to @typedef, but it specifies a function type instead of an object type:

  1. /**
     * @callback Predicate
     * @param {string} data
     * @param {number} [index]
     * @returns {boolean}
     */
  2. /** @type {Predicate} */
    const ok = (s) => !(s.length % 2);

Of course, any of these types can be declared using TypeScript syntax in a single-line @typedef:

  1. /** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */
    /** @typedef {(data: string, index?: number) => boolean} Predicate */

@template

You can declare generic functions with the @template tag:

  1. /**
     * @template T
     * @param {T} x - A generic parameter that flows through to the return type
     * @return {T}
     */
    function id(x) {
      return x;
    }
  2. const a = id("string");
    const b = id(123);
    const c = id({});

Use comma or multiple tags to declare multiple type parameters:

  1. /**
     * @template T,U,V
     * @template W,X
     */

You can also specify a type constraint before the type parameter name. Only the first type parameter in a list is constrained:

  1. /**
     * @template {string} K - K must be a string or string literal
     * @template {{ serious(): string }} Seriousalizable - must have a serious method
     * @param {K} key
     * @param {Seriousalizable} object
     */
    function seriousalize(key, object) {
      // ????
    }

Declaring generic classes or types is unsupported.

Classes

Classes can be declared as ES6 classes.

  1. class C {
      /**
       * @param {number} data
       */
      constructor(data) {
        // property types can be inferred
        this.name = "foo";
  2.     // or set explicitly
        /** @type {string | null} */
        this.title = null;
  3.     // or simply annotated, if they're set elsewhere
        /** @type {number} */
        this.size;
  4.     this.initialize(data); // Should error, initializer expects a string
      }
      /**
       * @param {string} s
       */
      initialize = function (s) {
        this.size = s.length;
      };
    }
  5. var c = new C(0);
  6. // C should only be called with new, but
    // because it is JavaScript, this is allowed and
    // considered an 'any'.
    var result = C(1);

They can also be declared as constructor functions, as described in the next section:

@constructor

The compiler infers constructor functions based on this-property assignments, but you can make checking stricter and suggestions better if you add a @constructor tag:

  1. /**
     * @constructor
     * @param {number} data
     */
    function C(data) {
      // property types can be inferred
      this.name = "foo";
  2.   // or set explicitly
      /** @type {string | null} */
      this.title = null;
  3.   // or simply annotated, if they're set elsewhere
      /** @type {number} */
      this.size;
  4.   this.initialize(data);
    Argument of type 'number' is not assignable to parameter of type 'string'.2345Argument of type 'number' is not assignable to parameter of type 'string'.
    }
    /**
     * @param {string} s
     */
    C.prototype.initialize = function (s) {
      this.size = s.length;
    };
  5. var c = new C(0);
    c.size;
  6. var result = C(1);
    Value of type 'typeof C' is not callable. Did you mean to include 'new'?2348Value of type 'typeof C' is not callable. Did you mean to include 'new'?

Note: Error messages only show up in JS codebases with a JSConfig and checkJs enabled.

With @constructor, this is checked inside the constructor function C, so you will get suggestions for the initialize method and an error if you pass it a number. Your editor may also show warnings if you call C instead of constructing it.

Unfortunately, this means that constructor functions that are also callable cannot use @constructor.

@this

The compiler can usually figure out the type of this when it has some context to work with. When it doesn’t, you can explicitly specify the type of this with @this:

  1. /**
     * @this {HTMLElement}
     * @param {*} e
     */
    function callbackForLater(e) {
      this.clientHeight = parseInt(e); // should be fine!
    }

@extends

When Javascript classes extend a generic base class, there is nowhere to specify what the type parameter should be. The @extends tag provides a place for that type parameter:

  1. /**
     * @template T
     * @extends {Set<T>}
     */
    class SortableSet extends Set {
      // ...
    }

Note that @extends only works with classes. Currently, there is no way for a constructor function extend a class.

@enum

The @enum tag allows you to create an object literal whose members are all of a specified type. Unlike most object literals in Javascript, it does not allow other members.

  1. /** @enum {number} */
    const JSDocState = {
      BeginningOfLine: 0,
      SawAsterisk: 1,
      SavingComments: 2,
    };
  2. JSDocState.SawAsterisk;

Note that @enum is quite different from, and much simpler than, TypeScript’s enum. However, unlike TypeScript’s enums, @enum can have any type:

  1. /** @enum {function(number): number} */
    const MathFuncs = {
      add1: (n) => n + 1,
      id: (n) => -n,
      sub1: (n) => n - 1,
    };
  2. MathFuncs.add1;

@deprecated Comments

When a function, method, or property is deprecated you can let users know by marking it with a /** @deprecated */ JSDoc comment. That information is surfaced in completion lists and as a suggestion diagnostic that editors can handle specially. In an editor like VS Code, deprecated values are typically displayed in a strike-through style like this.

  1. // @noErrors
    /** @deprecated */
    const apiV1 = {};
    const apiV2 = {};
    apiV;
    // ^|

More examples

  1. var someObj = {
      /**
       * @param {string} param1 - Docs on property assignments work
       */
      x: function (param1) {},
    };
  2. /**
     * As do docs on variable assignments
     * @return {Window}
     */
    let someFunc = function () {};
  3. /**
     * And class methods
     * @param {string} greeting The greeting to use
     */
    Foo.prototype.sayHi = (greeting) => console.log("Hi!");
  4. /**
     * And arrow functions expressions
     * @param {number} x - A multiplier
     */
    let myArrow = (x) => x * x;
  5. /**
     * Which means it works for stateless function components in JSX too
     * @param {{a: string, b: number}} test - Some param
     */
    var sfc = (test) => <div>{test.a.charAt(0)}</div>;
  6. /**
     * A parameter can be a class constructor, using Closure syntax.
     *
     * @param {{new(...args: any[]): object}} C - The class to register
     */
    function registerClass(C) {}
  7. /**
     * @param {...string} p1 - A 'rest' arg (array) of strings. (treated as 'any')
     */
    function fn10(p1) {}
  8. /**
     * @param {...string} p1 - A 'rest' arg (array) of strings. (treated as 'any')
     */
    function fn9(p1) {
      return p1.join();
    }

Patterns that are known NOT to be supported

Referring to objects in the value space as types doesn’t work unless the object also creates a type, like a constructor function.

  1. function aNormalFunction() {}
    /**
     * @type {aNormalFunction}
     */
    var wrong;
    /**
     * Use 'typeof' instead:
     * @type {typeof aNormalFunction}
     */
    var right;

Postfix equals on a property type in an object literal type doesn’t specify an optional property:

  1. /**
     * @type {{ a: string, b: number= }}
     */
    var wrong;
    /**
     * Use postfix question on the property name instead:
     * @type {{ a: string, b?: number }}
     */
    var right;

Nullable types only have meaning if strictNullChecks is on:

  1. /**
     * @type {?number}
     * With strictNullChecks: true  -- number | null
     * With strictNullChecks: false -- number
     */
    var nullable;

You can also use a union type:

  1. /**
     * @type {number | null}
     * With strictNullChecks: true  -- number | null
     * With strictNullChecks: false -- number
     */
    var unionNullable;

Non-nullable types have no meaning and are treated just as their original type:

  1. /**
     * @type {!number}
     * Just has type number
     */
    var normal;

Unlike JSDoc’s type system, TypeScript only allows you to mark types as containing null or not. There is no explicit non-nullability — if strictNullChecks is on, then number is not nullable. If it is off, then number is nullable.

Unsupported tags

TypeScript ignores any unsupported JSDoc tags.

The following tags have open issues to support them:

JS Class extensions

JSDoc Property Modifiers

From TypeScript 3.8 onwards, you can use JSDoc to modify the properties in a class. First are the accessibility modifiers: @public, @private, and @protected. These tags work exactly like public, private, and protected respectively work in TypeScript.

  1. // @ts-check
  2. class Car {
      constructor() {
        /** @private */
        this.identifier = 100;
      }
  3.   printIdentifier() {
        console.log(this.identifier);
      }
    }
  4. const c = new Car();
    console.log(c.identifier);
    Property 'identifier' is private and only accessible within class 'Car'.2341Property 'identifier' is private and only accessible within class 'Car'.
  • @public is always implied and can be left off, but means that a property can be reached from anywhere.
  • @private means that a property can only be used within the containing class.
  • @protected means that a property can only be used within the containing class, and all derived subclasses, but not on dissimilar instances of the containing class.

Next, we’ve also added the @readonly modifier to ensure that a property is only ever written to during initialization.

  1. // @ts-check
  2. class Car {
      constructor() {
        /** @readonly */
        this.identifier = 100;
      }
  3.   printIdentifier() {
        console.log(this.identifier);
      }
    }
  4. const c = new Car();
    console.log(c.identifier);