vscode Intellisense NodeJs

Question

在vscode中，开发人员可以将鼠标悬停在代码中的变量和对象的方法和属性上，并向您显示有关它们的信息。不幸的是，一旦我们将代码传递给另一个文件中的模块（因为javascript是静态类型的），这就失去了。有没有办法让我明确地输入传递给模块的参数？或者也许某种源图？我遇到问题的一个例子：

app.js

var express = require('express')
var app = express()

var routes = './routes/route.js'

route.js

module.exports = function(app) {
    // Hovering over app doesn't show the intellisense like it does in app.js
}

更新

我一直在寻找答案但没找到答案。这是我最接近它的工作，但由于某种原因，编辑器不想应用该类型。见下文：

route.js

import Express from 'Express'

/**
* @param {Express} app
*/        
module.exports = function(app) {
    // Hovering over app doesn't show the intellisense like it does in app.js
}

Answer 1

  

...因为javascript是静态类型的。

JavaScript不是静态类型的。它是动态输入的。

  

有没有办法可以显式输入传递给模块的参数？

是。使用TypeScript。它提供了optional static typing。

解释

在下面的屏幕截图中，Intellisense确实有效。它显示app属于any类型。这是我们用JavaScript做的最好的，因为JavaScript是动态类型的。在编译时，app确实可以是any类型。动态类型意味着仅在运行时检查类型。

Answer 2

第一个问题是VS Code无法确定app实际上是Express类型。这就是为什么你的第二版route.js似乎有道理。

问题在于，VS Code中解释的JSDoc不支持对象类型。

VS Code内部使用JavaScript语言服务，shown here。问题是，JavaScript语言服务本身实际上是TypeScript（请参阅同一页面上的链接）。

这可以通过以下方式回答您的问题：

首先，VS Code支持的JSDoc注释与supported by TypeScript相同。从TypeScript documentation开始，不支持：

/**
 * @param {object} param1 - Listing properties on an object type does not work
 * @param {string} param1.name
 */
function fn7(param1) {}

这就是为什么你的第二次尝试没有成功的原因。

但这得到了支持：

/** @type {{a: string, b: number}} */
var var12; 

因此，如果您确实非常喜欢冒险，那么您可以通过这种方式添加最需要的属性。我不认为这甚至值得付出努力。

最后的选择是实际使用TypeScript。它不需要对您的代码产生巨大的影响，并且会为您提供所需的类型信息。

所以我创建了一个route.ts，如下所示：

import 'node';
import { Express } from 'Express';

module.exports = function(app: Express) {
    // Your code with IntelliSense goes here
}

这样可以保留类型信息和智能感知功能，就像魅力一样。需要权衡的是，您还需要一个构建步骤（您可以在任务运行器或tsc --watch中透明地处理）。

然后再次获得所需的IntelliSense而不受ES6的约束（默认的TypeScript配置使用ES5），而不是被迫使用任何比你想要的更多的TypeScript。如果您愿意，其余所有代码都可以是纯JavaScript。

总结一下，您的三个选择是：

1. 没有智能感知。
2. 键入明确列出所需属性或功能的注释。
3. 使用TypeScript类型注释。

编辑：我应该补充一点，我还为Node和Express安装了TypeScript类型的导入。我不确定它们是否明确需要，但如果你想走这条路，你应该安装它们。

使用此：

npm install @types/node
npm install @types/express

Answer 3

VS Code中有一个非常有用的功能，可以启用合成默认导入。它将自动从JSDoc或类型定义文件导入类型信息。

我已经链接了一个blog post，它向您展示了如何进行设置，以及一个实用的功能示例

Answer 4

我认为更好的解决方案是：

numbers[0]

如您所见，该函数未包装，但需要es6;）