CODEWITHSUNDEEP
javascriptwebstorm
S Panfilov
S Panfilov

Reputation: 17531

How to fight tons of unresolved variables warning in WebStorm?

I have a function that takes data from server:

function getData(data){
    console.log(data.someVar);
}

WebStorm says that someVar is an unresolved variable. How can I get rid of such warnings?

I see several options:

Also, WebStorm is offering me to create namespace for the "data" (add an annotation like /** @namespace data.some_unres_var*/), create such field, or rename it.

Upvotes: 160

Views: 94563

Answers (8)

Jeffrey Chen
Jeffrey Chen

Reputation: 11

The best way for me is to use the @param tag for the function parameters and use @property for the inline properties.

/**
 * @param {object} x
 * @param {string} x.id
 * @param {string} x.name
 */
function addProp(x) {
  const results = await ...
  for(let r of results) {
    /**
     * @property {string} r.id
     * @property {string} r.name
     */
    console.log(x.id + ' ' + r.id);
  }
}

Upvotes: 1

Garvae
Garvae

Reputation: 728

Tons of "unresolved variables" when using "moduleResolution": "bundler" in the tsconfig.json

I ran into a similar issue when porting a React app to NextJs. The fact is that modern NextJs suggests using "moduleResolution": "bundler" in the tsconfig.json configuration file, but this causes an error in the webstorm.

If you're facing a similar issue, try changing moduleResolution to node.

tsconfig.json:

{
  "compilerOptions": {
    /* ... */
    "moduleResolution": "node",
    /* ... */
  },
 /* ... */
}

Upvotes: 2

valdeci
valdeci

Reputation: 15237

To remove the warnings on The WebStorm IDE you can simply uncheck the inspection options for:

  • Unresolved Javascript function
  • Unresolved Javascript variable

ps. this will remove the warnings on the IDE, that I don't think is the best idea, because we will lost one of the best utilities in a IDE like Webstorm, which can worsen the quality of our code.

Even so, if you want to follow in the menu: File > Settings > Editor > Inspections we can disable the Javascript warnings

Like the following picture:

uncheck options

Upvotes: 4

Andreas Berheim Brudin
Andreas Berheim Brudin

Reputation: 2280

Use JSDoc:

/**
 * @param {{some_unres_var:string}} data
 */
function getData(data){
    console.log(data.some_unres_var);
}

Upvotes: 134

Bob Stein
Bob Stein

Reputation: 17204

JSDoc the object. Then its members.

/**
 * @param data          Information about the object.
 * @param data.member   Information about the object's members.
 */
function getData(data){
    console.log(data.member);
}
  • @property for local variables (non parameters).
  • Tested in PyCharm. @Nicholi confirms it works in WebStorm.
  • The {{ member:type }} syntax Andreas suggested may conflict with Django templates.
  • Thanks to Jonny Buchanan's answer citing the @param wiki.

To document arrays of objects, use [] brackets as JSDoc suggests:

/**
 * @param data
 * @param data.array_member[].foo
 */

Upvotes: 63

lena
lena

Reputation: 93728

using a dummy js file with anonymous function expression returning the json literal, as written at http://devnet.jetbrains.com/message/5366907, may be a solution. I can also suggest creating a fake variable that will hold this json value, and use this var as a value of @param annotation to let WebStorm know what the actual type is. Like:

var jsontext = {"some_unres_var":"val"};
/** @param {jsontext} data */
function getData(data){
    console.log(data.some_unres_var);
}

See also http://devnet.jetbrains.com/message/5504337#5504337

Upvotes: 7

lazy.lizard
lazy.lizard

Reputation: 919

Destructuring use, Luke.

function getData(data){
    const {member} = data;
    console.log(member);
}

Upvotes: 18

Dan Dascalescu
Dan Dascalescu

Reputation: 151916

All other answers are incorrect for the general case. What if you don't get data as a parameter? You don't have JSDoc then:

function niceApiCall(parameters) {
  const result = await ...  // HTTP call to the API here
  for (const e of result.entries) {
    .. // decorate each entry in the result
  }
  return result;
}

WebStorm will warn that "result.entries" is an unresolved variable (field).

The general solution is to add an @namespace declaration:

function niceApiCall(parameters) {
  /** @namespace result.entries **/
  const result = await ...  // HTTP call to the API here
  for (const e of result.entries) {
    .. // decorate each entry in the result
  }
  return result;
}

Upvotes: 34

Related Questions