Search code examples
javascriptinterfacevisual-studio-codeintellisense.d.ts

Declare Interfaces in typings file for JavaScript


Project Info

I'm working on a JavaScript project that utilizes .d.ts files. This is a subsequent question to a question I previously asked, so you can view more information regarding the project here.

Problem

Although I can normally extract functions from the typings files I can't extract interfaces or namespaces that are either empty or consist purely of interfaces. I have temporarily fixed this problem by creating a const implementation for each interface and using @typeof ConstantImplementation in the comments. See Example below:

// Typings File
export namespace test {
    export interface ITest {
        foo: string;
        bar: number;
    }
    export const Test: ITest;
}

// JS File
if (undefined) var {Test: ITest} = require("globals.d.ts").test; 
// Above line shows `unused var error`

/* @type {typeof ITest} */
var x = {};
x.foo = "hello";
x.bar = 3;
// if I do `x.` intellisense should suggest `foo` and `bar` 

I was wondering if there is a better way to go around the problem, preferably one that doesn't throw an error (using eslint ignore line isn't a fix).

Clarification

This question is not about getting functionality from typings file. It's purely about making VSCode intellisense working with typings Interfaces. Here is an image to explain what it is that I want (the two lines inside the circle):

enter image description here


Solution

  • So I was able to solve the issue using JSDoc

    test.d.ts

    export namespace test {
        export interface ITest {
            foo: string;
            bar: number;
        }
    }
    

    test.js

    /**
     * @type {import("./test").test.ITest}
     */
    
    let x;
    
    x.
    

    And the intellisense works now

    Working intellisense

    Also one thing I found is that if you add jsconfig.json with

    jsconfig.json

    {
        "compilerOptions": {
            "checkJs": true
        }
    }
    

    Your intellisense improves further

    Better intellisense

    Update-1

    As pointed out by @nickzoum, if you define the test.d.ts like below

    export interface ITest {
        foo: string;
        bar: number;
    }
    
    export as namespace test;
    

    Then you can also use below form in JS for intellisense

    /** @typedef {import("./test").ITest} ITest */
    
    /** @type {ITest} */
    var x = {};
    x.