Boost Your JavaScript with JSDoc Typing

• type-fest

  32 13,221 9.0 TypeScript

  A collection of essential TypeScript types

With these powerful features, you can create dynamic and expressive types. One last thing I want to mention before moving on, is that you can install libraries with which you can add more types to your project like type-fest or utility-types. These libraries contain a lot of useful types that you can use in your project.

• JSDoc

  67 14,742 9.3 JavaScript

  An API documentation generator for JavaScript.

  

You can also use more complex Markdown features like lists and tables. Check out the [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) from Adam Pritchard for more information. ### Other JSDoc tags 📚 There are a few other JSDoc tags that you may find useful: - `@function` or `@func`: Documents a function or method. - `@class`: Documents a class constructor. - `@constructor`: Indicates that a function is a constructor for a class. - `@extends` or `@augments`: Indicates that a class or type extends another class or type. - `@implements`: Indicates that a class or type implements an interface. - `@namespace`: Groups related items, such as functions, classes, or types, under a common namespace. - `@memberof`: Specifies that an item belongs to a class, namespace, or module. - `@ignore`: Tells JSDoc to exclude an item from the generated documentation. - `@deprecated`: Marks a function, class, or property as deprecated, indicating it should no longer be used. - `@since`: Documents the version when an item was introduced. And many more. You can find a full list of JSDoc tags [here](https://jsdoc.app/). Ok ok, enough of the theory. Let's see how we can use JSDoc in practice.  ## Using JSDoc in practice 🏄‍♂️ There are a few challenges when starting to use JSDoc in your project. So this section will focus on these challenges and how you can overcome them. ### How to get the most out of JSDoc In this post I'm going to stick with VSCode. If you're using another editor, you can still follow along, but you might have to look up how to configure things in your editor. VSCode has built-in support for JSDoc. This means that you can get a lot of the JSDoc benefits without having to install any additional extensions. But there are a few things that you can do to get even more out of JSDoc. Enabling the checkJs option in your `jsconfig.json` file will make the editor display errors for type mismatches, even in JavaScript files. Place it in the root of your project or in the folder where you want to enable type checking. This file can look like this: ```json { "compilerOptions": { "checkJs": true, } }

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• utility-types

  7 5,342 5.4 TypeScript

  Collection of utility types, complementing TypeScript built-in mapped types and aliases (think "lodash" for static types).

With these powerful features, you can create dynamic and expressive types. One last thing I want to mention before moving on, is that you can install libraries with which you can add more types to your project like type-fest or utility-types. These libraries contain a lot of useful types that you can use in your project.

• markdown-here

  73 59,476 0.0 JavaScript

  Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending.

You can also use more complex Markdown features like lists and tables. Check out the [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) from Adam Pritchard for more information. ### Other JSDoc tags 📚 There are a few other JSDoc tags that you may find useful: - `@function` or `@func`: Documents a function or method. - `@class`: Documents a class constructor. - `@constructor`: Indicates that a function is a constructor for a class. - `@extends` or `@augments`: Indicates that a class or type extends another class or type. - `@implements`: Indicates that a class or type implements an interface. - `@namespace`: Groups related items, such as functions, classes, or types, under a common namespace. - `@memberof`: Specifies that an item belongs to a class, namespace, or module. - `@ignore`: Tells JSDoc to exclude an item from the generated documentation. - `@deprecated`: Marks a function, class, or property as deprecated, indicating it should no longer be used. - `@since`: Documents the version when an item was introduced. And many more. You can find a full list of JSDoc tags [here](https://jsdoc.app/). Ok ok, enough of the theory. Let's see how we can use JSDoc in practice.  ## Using JSDoc in practice 🏄‍♂️ There are a few challenges when starting to use JSDoc in your project. So this section will focus on these challenges and how you can overcome them. ### How to get the most out of JSDoc In this post I'm going to stick with VSCode. If you're using another editor, you can still follow along, but you might have to look up how to configure things in your editor. VSCode has built-in support for JSDoc. This means that you can get a lot of the JSDoc benefits without having to install any additional extensions. But there are a few things that you can do to get even more out of JSDoc. Enabling the checkJs option in your `jsconfig.json` file will make the editor display errors for type mismatches, even in JavaScript files. Place it in the root of your project or in the folder where you want to enable type checking. This file can look like this: ```json { "compilerOptions": { "checkJs": true, } }

• DefinitelyTyped

  158 47,143 10.0 TypeScript

  The repository for high quality TypeScript type definitions.

  

typeAcquisition allows you to specify which libraries you want to use in your project. It will then automatically download the type definitions for these libraries from the DefinitelyTyped project. This community project contains type definitions for npm packages that don't ship with their own type definitions. This is how it may look like:

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project