Explaining function parameter properties with JSDoc in WebStorm

Question

Explaining function parameter properties with JSDoc in WebStorm

How can I declare that company is a String in this code snippet using JSDoc?

fetch('https://api.github.com/users/mdo').then(res => res.json()).then(res => {
  console.log(res.company);
});

When I use WebStorm, it shows company as an Unresolved variable:

https://i.sstatic.net/gn1kb.png

If I add

/** @namespace bogus.company **/

anywhere in the file, WebStorm accepts it, but it seems odd:

https://i.sstatic.net/lxT3X.png

Is this a bug in WebStorm, or am I misunderstanding how JSDoc declarations should be used?

Should JSDoc even be used for this scenario?

javascript webstorm jsdoc jsdoc3

Answer 1

Answer №1

If you go through the inspection regarding unresolved javascript variable, there is an option called

Report undeclared properties as error

that you have the choice to deselect.

Personally, I tend to follow this approach:

/**
 * @param {Object} res
 * @property {String} company
 */
function myOutput(res) {
  console.log(res.company);
}

fetch('https://api.github.com/users/mdo')
  .then(myToJson)
  .then(myOutput);

However, for small anonymous functions, it may not be worth bothering about. Since it's a minor warning, you could either disable the inspection or simply tolerate it. While it is feasible to include /** @param {*} something */ in anonymous functions, it often ends up reducing readability.

Another alternative is creating a dummy file like something.js within your content-root with an anonymous function defined as follows:

(() => {
  return {
    "github-users-response" : {
      "company" : "sample"
    }
  }
});

By doing so, WebStorm will recognize that 'company' is indeed defined in your other files. You can even place it in a separate content-root if you prefer to keep it isolated from your main project.

Answer 2

If you go through the inspection regarding unresolved javascript variable, there is an option called

Report undeclared properties as error

that you have the choice to deselect.

Personally, I tend to follow this approach:

/**
 * @param {Object} res
 * @property {String} company
 */
function myOutput(res) {
  console.log(res.company);
}

fetch('https://api.github.com/users/mdo')
  .then(myToJson)
  .then(myOutput);

However, for small anonymous functions, it may not be worth bothering about. Since it's a minor warning, you could either disable the inspection or simply tolerate it. While it is feasible to include /** @param {*} something */ in anonymous functions, it often ends up reducing readability.

Another alternative is creating a dummy file like something.js within your content-root with an anonymous function defined as follows:

(() => {
  return {
    "github-users-response" : {
      "company" : "sample"
    }
  }
});

By doing so, WebStorm will recognize that 'company' is indeed defined in your other files. You can even place it in a separate content-root if you prefer to keep it isolated from your main project.

Explaining function parameter properties with JSDoc in WebStorm

Answer №1

Similar questions

Creating a unique Angular 2 Custom Pipe tutorial

Using v-model to dynamically update the router based on certain conditions

Conduct unit testing on the React component created by a function that takes an array of objects as a parameter

Is the number 9933272057275866 truly magical?

Implement an AJAX function to prompt a save dialog before initiating the download process

Error message: "An issue occurred with the Bootstrap Modal in

How to implement a form in PHP that doesn't refresh the page upon submission

Utilizing the document.createDocumentFragment() method along with innerHTML for manipulating a Document Object Model (

Transferring a variable from a .jsp file to a .js file

Whenever I create the code using javascript, padding seems to always show up

Is Redux necessary for arranging ItemList on the left side and ItemContent on the right side?

No value is stored in the Javascript variable

Enforce a limit of two decimal places on input fields using jQuery

Simultaneous fading and displaying of the navbar

Developing front-end libraries using the jspm workflow

executing an SQL query with mysql-npm on the Amazon Web Services platform

How can AngularJS utilize variables from an external JavaScript <script> file within an HTML document?

transpile TypeScript code into ES6 rather than ES5

Dynamically import a file from a specific URL

Exploring Inner Textures on a Cylinder in Three.js