Add custom typings file in a JavaScript VSCode project

visual studio code javascript intellisense
visual studio code javascript intellisense not working
how to use javascript in visual studio 2019
visual studio javascript project
visual studio javascript intellisense
vscode typescript extensions
run javascript file in vscode
add a new declaration d ts file containing declare module
Problem

I am working on JavaScript project using VSCode. I am using the UMD design pattern and vscode intellisense cannot recognize the exports of a module from another file. I added all the declarations in a file called globals.d.ts. Unfortunately I couldn't find a way to load the globals.d.ts declarations from my JavaScript files.

Example Module declaration
export namespace ModuleName {
    export interface Item {
        toString(): string;
        property: string;
        name: string;
    }
}
Example JavaScript File
(function (global, factory) {
    "use strict";
    if (typeof ModuleName === "undefined" && typeof require === "function") global.ModuleName = require("./mymodule.js");
    if (typeof exports !== "undefined" && typeof module !== "undefined") factory(exports);
    else factory(global.OtherModule = global.OtherModule || {});
})(this, (function (exports) {
    "use strict";

    function myMethod() {

    }

    exports.myMethod = myMethod;
    return exports;
}));
What I tried

I tried using typings install "globals.d.ts" which created the typings folder, typings.json etc. This was only working after opening the typings file in VSCode then closing and reopening the app. That only worked while I kept the typings file open. This is not a very convenient way to add my interface declarations.

About VSCode (8 months ago)
Version: 1.17.0
Shell: 1.7.7
Node: 7.9.0
Architecture: x64
About VSCode (Now)
Version: 1.24.1
Shell: 1.7.12
Node: 7.9.0
Architecture: x64

There is no change in behavior.

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.

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

Add custom typings file in a JavaScript VSCode project, I am working on JavaScript project using VSCode. I am using the UMD design pattern and vscode intellisense cannot recognize the exports of  You can create local custom typings just for your project, where you can declare types for JS libraries. For that, you need to: Create directory structure to keep your type declaration files so that your directory structure looks similar to this:

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.

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

Add a custom type definition file for an existing (non-typed) npm , Add a custom type definition file for an existing (non-typed) npm module, while automatically pick up the typing (for both Typescript or Javascript in case of VS  vscode visual typings type studio run new make how generate custom containing code javascript visual-studio-code typescript-typings .d.ts Get the name of an object's type Add days to JavaScript Date

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.

Working with JavaScript in Visual Studio Code, While IntelliSense should just work for most JavaScript projects without any Many popular libraries ship with typings files so you get IntelliSense for them If IntelliSense is slow, add folders to your exclude list (VS Code will prompt you to do  $ npm install -g --save typings # if you haven't already $ cat > custom.d.ts # type definition file for that module declare module 'custom'; ^D $ typings install --global --save file:custom.d.ts That’s it!

Using Custom Types in JavaScript Docs - DEV Community ‍ ‍ , Tagged with discuss, vscode, javascript, documentation. It's a file I've created in order to help with my new project, Enmeti. a window namespace so I can reference it as a variable and then use that in the comments. I added a typings file, pushed to npm and the dev that created the issue was pleased. A JavaScript project is the source files of the project and should not include the derived or packaged files (such as a dist directory). In more complex projects, you may have more than one jsconfig.json file defined inside a workspace.

A guide to creating Custom Type Definitions for JavaScript , What to do when you get a "Could not find a declaration file for If you are importing a javascript dependency into your typescript app, it exists or add a new declaration (.d.ts) file containing declare module 'third-party-library-name';” removing Typescript from your project or losing type-safety by adding  However, when using the ng-cli to create the Angular 7 project, there is no such file generated. In this other article (for Angular 2), the author suggests to create a typings folder and place the typings.d.ts there and to modify the tsconfig.json file with a files key; doing this gives me a TS5023: Uknown compiler option 'files'. message.

Including TypeScript Definitions in a non-TypeScript Project Using , Visual Studio Code IntelliSense for AngularJS Using TypeScript Definitions. To add this TypeScript feature to a JavaScript project, you will need to install TypeScript We will be using the Typings package to manage TypeScript definition files. But sometimes, you need to tell the TypeScript compiler to expect "ambient values" that are provided outside of the scope of the known *.ts files. To do this, you have to install a custom Typings file - *.d.ts - in your Angular 2 application. Doing this, at least for me as a TypeScript novice, was not straightforward.

Comments
  • typings is deprecated, you should use npm i @types/[module] instead
  • If you're dealing with local files, you shouldn't be using either. You should add these files in includes in your tsconfig file
  • If you want to reference actual type files in a JavaScript project I think you need to add a tsconfig.json file and use that to reference the custom types. You might also be able to use /// references for referencing the type files.
  • Have you tried using JSDoc? You can paint your objects (functions) with JSDocs @type, @param, and @returns and intellisense will parse those.
  • @nickzoum, latest version of VSdcode is Version 1.24.1 (1.24.1), please upgrade first and then share your feedback
  • I am not sure why do you need that in with typescript (cause d.ts is a typescript file) but what is the error?
  • Could you post your d.ts files somewhere? Because, in my solution for NodeJs interface already presented and works fine.
  • @nickzoum Am I correct you want to keep only one single d.ts file for all of your code?
  • @nickzoum That's correct, cause I can't declare types inside of the javascript (without jsdoc ofc) so I don't need interfaces directly. But in case of using jsDoc I don't how to link them. May be it is good idea to create a new question, cause we already far away from the original one.
  • You can use imports inside a node app if you use babel. But as I understand this is not possible, yeah?