vscode Intellisense NodeJs

Question

In vscode, developers have the ability to hover over methods and properties of variables and objects in our code, and it will show you information regarding them. Unfortunately, that is lost once we pass the code to a module inside of another file (since javascript is statically typed). Is there any way possible for me to explicitly type a parameter passed to a module? Or maybe a source-map of some sort? An example of where I have an issue:

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
}

Update

I have continued searching for the answer but have not found one. This is the closest to getting it to work I have got, but for some reason, the editor doesn't want to apply the type. See below:

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

...since javascript is statically typed.

JavaScript not statically typed. It is dynamically typed.

Is there any way possible for me to explicitly type a parameter passed to a module?

Yes. Use TypeScript. It provides optional static typing.

Explanation

In the following screenshot, the Intellisense does work. It is showing that app is of type any. That is the best we can do with JavaScript, because JavaScript is dynamically typed. At compile time, app can indeed be any type. Being dynamically typed means that the type is checked only at runtime.

Answer 2

The first problem is that VS Code has no way to determine that app is actually of the type Express. This is why your second version of route.js seems to make sense.

The problem with that, is that object types are not supported in JSDoc as interpreted by VS Code.

VS Code internally uses the JavaScript Language Service, as shown here. The thing is, the JavaScript Language Service itself is actually TypeScript (see the links to it on the same page).

This answers your question in the following ways:

First, The JSDoc annotations supported by VS Code are the same as those supported by TypeScript. And from the TypeScript documentation, this is not supported:

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

And that's why your second attempt didn't work.

But this is supported:

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

So if you're very adventurous indeed, you could add the most-needed properties that way. I don't think that's even worth the effort.

The final alternative would be to actually use TypeScript. It doesn't need to make a huge difference to your code and will give you the type information you need.

So I created a route.ts that looks like this:

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

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

This preserves the type information and IntelliSense and works like a charm. The trade-off is that you require one more build step (which you can handle transparently in your task runner or with tsc --watch).

Then again, you get the IntelliSense you want without being bound to ES6 (default TypeScript config uses ES5) and without being forced to use any more TypeScript than you want. All the rest of your code can be plain JavaScript if you feel like it.

To recap, your three alternatives are:

1. No IntelliSense.
2. Type annotations that explicitly list needed properties or functions.
3. Use TypeScript type annotations.

Edit: I should add that I also installed the TypeScript type imports for both Node and Express. I'm not sure if they are explicitly needed, but you should probably install them if you want to go this route.

Use this:

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

Answer 3

There is a really useful feature in VS Code that enables Synthetic Default Imports. It will automatically import typing information from the JSDoc or from type definition files.

I've linked a blog post that shows you both how to get setup, and a practical example of the functionality it

Answer 4

I think a better solution would be this:

function myFunc() {
    //damn code
}

export default myFunc

As you can see, the function is not wrapped, but requires es6 ;)