如何在 WebStorm 中对抗大量未解决的变量警告？

Question

我有一个从服务器获取数据的函数：

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

WebStorm 说 someVar 是一个未解决的变量。 我怎样才能摆脱这样的警告？

我看到了几个选项：

• 在 IDE 设置中禁止警告；
• 添加带有字段的 JSON 源文件 (details)；
• 使用类似数组的语法：data['some_unres_var'];

此外，WebStorm 还允许我为“数据”创建命名空间（添加注释，如 /** @namespace data.some_unres_var*/）、创建此类字段或重命名。

Answer 1

要删除 WebStorm IDE 上的警告，您只需取消选中以下检查选项：

• 未解析的 Javascript 函数
• 未解析的 Javascript 变量

ps。这将删除 IDE 上的警告，我认为这不是最好的主意，因为我们将失去像 Webstorm 这样的 IDE 中最好的实用程序之一，这会降低我们的代码质量。

即便如此，如果您想在菜单中进行操作：文件 > 设置 > Editor > Inspections我们可以禁用 Javascript 警告

如下图：

Answer 2

使用JSDoc:

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

Answer 3

JSDoc 对象。然后是它的成员。

/**
 * @param data          Information about the object.
 * @param data.member   Information about the object's members.
 */
function getData(data){
    console.log(data.member);
}

• @property 用于局部变量（非参数）。
• 在 PyCharm 中测试。 @Nicholi 确认它在 WebStorm 中有效。
• Andreas 建议的 {{ member:type }} 语法可能与 Django 模板冲突。
• 感谢 Jonny Buchanan 的 answer 引用 @param wiki。

要记录对象数组，请使用[] 括号作为JSDoc suggests：

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

Answer 4

使用带有匿名函数表达式的虚拟 js 文件返回 json 文字，如 http://devnet.jetbrains.com/message/5366907 所写，可能是一种解决方案。我还可以建议创建一个假变量来保存这个 json 值，并使用这个 var 作为 @param 注释的值，让 WebStorm 知道实际类型是什么。喜欢：

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

另见http://devnet.jetbrains.com/message/5504337#5504337

Answer 5

解构使用，卢克。

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

Answer 6

对于一般情况，所有其他答案都不正确。如果你没有得到data 作为参数怎么办？那么你没有 JSDoc：

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 将警告“result.entries”是一个未解析的变量（字段）。

一般的解决方案是添加@namespace声明：

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;
}