Javascript class not picking up TypeScript declaration file in Visual Studio Code

Question

I have a Typescript/JavaScript hybrid project and I'm creating declaration d.ts files for some of the JavaScript files in order to aid in the management of multiple classes and subclasses.

However the declared types are not being seen by Visual Studio Code. I have the js and corresponding d.ts files in the same directory.

For example:

my-class.js

class MyClass {
  constructor(options) {}

  action(num) {
    return num.toString()
  }
}

}

my-class.d.ts

export interface Options {
  a: boolean
  b: boolean
}

export declare abstract class MyClass {
  constructor(options: Options)
  action(num: number): string
}

IntelliSense does not pick up the definitions, for instance, when I hover over the action method of my-class.js.

I've tried adding a reference annotation at the top of my-class.js with no effect (///<reference path="./my-class.d.ts" />).

I have the checkJs option set to true in my settings.

I'm using VS Code Version 1.19.1

Are there other actions I need to take in order for this to work?

Try opening folder, not files. I think I found in the past (been several revisions of Code since I have done any .ts edits) that Code had issues doing cross file intellisense if you opened files individually. — eat-sleep-code
– eat-sleep-code, Commented Jan 4, 2018 at 16:49

Justin · Accepted Answer · 2018-01-05 00:20:45Z

4

Make sure you have a jsconfig.json file in your working folder. After you have this config file your .d.ts files should be included/reference.

Regarding your specific example, as far as I know, it's not going to work as you expect. This is because of declaration scope. Meaning, in your .d.ts file you define a MyClass with TypeScript types, then in your .js file you define a second MyClass, this second declaration also has types, it has default types of any. If you were inheriting from the first class then it may work as your expecting.

That being said there are things that will work:

You should get IntelliSense on the Instance of the class
You can add JSDoc comments to your .js files to define/link the .d.ts types

Example:

my-class.d.ts

declare interface Options {
    a: boolean
    b: boolean
}

declare class MyClass {
  constructor(options: Options)
  action(num: number): string
}

my-class.js

class MyClass {
  /**
  * @param {Options} options 
  */
  constructor(options) {   
  }

  action(num) {
    return num.toString();
  }
}
var foo = new MyClass({ a: true, b: false } );
foo.action(88);

If you hover over the foo instance in the .js file you will notice that you do get correct IntelliSense

By adding the JSDoc Comment "@param {Options} options" to the constructor() you will also get correct IntelliSense

JSDoc and TypeScript: https://github.com/Microsoft/TypeScript/wiki/JsDoc-support-in-JavaScript VSCode and TypeChecking: https://code.visualstudio.com/docs/languages/javascript#_global-variables-and-type-checking

answered Jan 5, 2018 at 0:20

Justin

1811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

t.888 Over a year ago

Justin, thanks for the response. I do have a jsconfig.json in the working root. I'll try what you suggest when I'm able (tomorrow); however I was trying to avoid using JSDoc annotations everywhere, hence the .d.ts files. Wrt scope, I was under the impression that the .d.ts declared the classes, interfaces, etc., while the .js files defined them. Thanks again. I'll give this a shot.

EECOLOR Over a year ago

@t.888 did you manage to get it to work (get intellisense in the .js file for which the .d.ts was defined)?

t.888 Over a year ago

@EECOLOR I have not. I use JSDoc to define types, which works inside the .js module file, and of course the .d.ts file works for any consumers of the .js module, but not inside the module itself.

Collectives™ on Stack Overflow

Javascript class not picking up TypeScript declaration file in Visual Studio Code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related