Add custom typings file in a JavaScript VSCode project

Acknowledgment

This answer was mostly copied/inspired by Vitalii's answer, but since it had to be modified a bit, to work with my project, I am also adding this answer.

Solution

On top of each file where I use external code, I added:

if (undefined) var { -List of Namespaces used- } = require("./globals");

Undefined is the shortest and simplest way (that I thought of) of having a constant false value without triggering eslint or jshint. This ensures that the code will never be run, while still "requiring" the jsdoc.

I used var instead of let or const since it will not stay in the if scope, but rather the global file scope.

This will actually declare the variables inside the {} (as undefined), but typeof undeclared and typeof undefined are both "undefined", thus there is no difference in the code.

By having all the declarations in one file, I can get all the namespaces by destructuring one require statement in one line. But keep in mind, that in order for this to work, you need to be using export and not declare in your typings file.

Problems with Solution

I cannot view the interfaces in globals.d.ts from JavaScript files.

export namespace Namespace {
    export interface Interface {
        property: string;
    }
}

I have temporarily fixed this problem by renaming the namespace with the interfaces to Interfaces (also fixed all the references in globals.d.ts) and created another Namespace with constants that implement the interfaces, like so:

export namespace Interfaces {
    export interface Interface {
        property: string;
    }
}

export namespace Namespace {
    export const Interface: Interfaces.Interface;
}

I also had trouble using the namespaces from globals.d.ts in JavaScript comments. To solve this problem I added typeof infront of the type, like so: /** @param {typeof Namespace.Interface} */

Update

I have now found a way to export interfaces from .d.ts files to .js files, you can find the answer here.


ES6 import syntax solution for those who are using babel

Create next files (names should be the same):

lib.js 
lib.d.ts

Inside lib.js write some code, lets say this one:

export const testMethod = (name, params) => params && params.age ? `hello ${name} with age: ${params.age}` : `hello ${name}`;
export const myConst = {
     name: 'test',
     age: 5
 };

Inside lib.d.ts write this:

declare namespace MyModule {
    interface IParams { age: number; }

    function testMethod(name: string, params: IParams): string;

    const myConst: {
        name: string,
        age: number
    }
}
export = MyModule;

Then, create somewhere file to consume newly created function and put this code:

import { testMethod } from "./lib/lib";

const name = 'drag13';
const r = testMethod(name, { age: 5 });
console.log(r);

Now, intellisense should works fine for params and result.

enter image description here

But. This approach requires you to use babel to friend node.js and imports. If you will try to change code from import style to require style you still will see types and arguments, but intelisence will fail.

Simple babel check:

npm i babel-preset-env babel-cli
./node_modules/.bin/babel-node index.js --presets env

My VsCode version is 1.24.1


Plain Node.JS solution

Create next files (names should be the same):

lib.js 
lib.d.ts

Inside lib.js write some code, lets say this one:

function whenDo(params) {
    return params;
}

module.exports = whenDo;

Inside lib.d.ts write this:

declare function wd(params: wd.Params): wd.Params;

declare namespace wd {
    interface Params {
        name: string;
    }
}

export = wd;

Then, create somewhere file to consume newly created function and put this code:

const wd = require('./lib/lib');

const opt = wd({name:'drag13'});
console.log(opt.name);

And magic is here, all worked just fine. enter image description here

Code was stolen from here: https://github.com/Drag13/WhenDo/blob/master/dts/index.d.ts

The approach described here