Question

0

241

Views

How to use a .d.ts declaration file in a JS environment inside VSCode?

I have been working on a JavaScript library, and want to document it using TypeScript declaration files. Now the problem is that I couldn't understand how to work with the file as I am developing the library in Visual Studio Code.

So I have set up this simple example.

Here's my directory structure:

learning
|-- index.js
|-- greeting.js
|-- greeting.d.ts

Suppose I have the following greeting.d.ts file that documents the class Greeting:

// greeting.d.ts
export class Greeting {
    constructor(msg: string)
    greet(): void
}

And here's the greeting.js file that defines the logic of the class Greeting:

// greeting.js
class Greeting {
    constructor(msg) {
        this.msg = msg;
    }
    greet() {
        console.log(this.msg);
    }
}

module.exports = Greeting;

This file is imported by index.js whereby I do a simple greeting:

// index.js
var Greeting = require('./greet.js');

var g = new Greeting('Hello World!');
g.greet();

As is clear, I am currently using the CommonJS-style modules.

Now, while I am working in my JS files (note that I am not working in a TypeScript environment — I want to use TypeScript only for documentation purposes for now), such as index.js and greeting.js, I want to be able to get intellisense based on the greeting.d.ts file.

I have tried many options, such as setting the typeRoots options in the tsconfig.json file placed inside the directory learning, or modifying the include property in the same tsconfig.json file, but none seems to be a solution.