How to use Typescript definitions to get Intellisense for my own Javascript services in VS Code?

Question

I am developing a backend server using SailsJS. It basically injects all model helper services, as well as my own services into the global namespace. It would benefit me greatly if I was able to get Intellisense for those services.

I first set up typings and installed global type definitions for lodash and node. It works like a charm after creating a jsconfig.json and tsconfig.json files.

Next I wanted to create a basic definitions file for my own services. I created a directory in typings/globals with a index.d.ts file in it:

declare namespace foo {
    export function bar();
}
declare var baz: { some: number };

This is just to make sure I don't waste time writing definitions if they won't work.

Next I included that index.d.ts file in typings/index.d.ts by adding a reference tag:

/// <reference path="globals/psiewakacje/index.d.ts" />

To my surprise, it does not work in my project's Javascript files. Upon typing foo. or baz. I do not get any sensible Intellisense.

The only Intellisense support I was able to get was when I imported those services in every file via:

import * as InternalParser from '../services/InternalParser';

or

var InternalParser = require('../services/InternalParser');

but this doesn't use Typescript's definition files and just gives me the exported properties. Overall a not desirable result.

I wonder how to get it to work correctly. I looked at node's and lodash's type definition files and they do the same: declare a variable / namespace with a specific type. However, their definitions work in Javascript and mine don't. How to get it right?

Have you tried to include your .d.ts inside your package.json? — Akash Kava
– Akash Kava, Commented Aug 30, 2018 at 21:21
If anyone stumbles upon this question one day, the perfect answer is here : stackoverflow.com/questions/46678663/… — Telokis
– Telokis, Commented Aug 31, 2018 at 9:09

Matt McCutchen · Accepted Answer · 2018-08-28 02:46:05Z

5

+25

I can reproduce the behavior described if I create a tsconfig.json file without the "allowJs": "true" compiler option. If you want your TypeScript and JavaScript files to be considered as a single project, you should have a tsconfig.json file with "allowJs": "true" and no jsconfig.json file.

answered Aug 28, 2018 at 2:46

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

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

7 Comments

Telokis Over a year ago

So, if I change my jsconfig.json file to a tsconfig.json file with "allowJs": true, I will be able to code in JS and define custom typings for my js files? You can take a look at this comment to have a detailed explanation regarding what I am trying to achieve.

Matt McCutchen Over a year ago

Yes. For typings dependent on the imported file, your .d.ts file needs to be either alongside your .js file or virtually alongside it based on the rootDirs compiler option. If you need more help meeting requirements not described in the original question, please submit a new question.

Telokis Over a year ago

It doesn't work for me. I tried recreating the original question and applying your suggestion but I don't get any intellisense anymore.

Matt McCutchen Over a year ago

See my working example project at github.com/mattmccutchen/stackoverflow-38370549 .

Telokis Over a year ago

I found the absolute perfect answer here. And it doesn't require me to use a tsconfig file instead of a jsconfig.

|

Pelle Jacobs · Accepted Answer · 2016-08-18 20:52:17Z

2

You don't need to add a reference to typings/index.d.ts. The easiest would be to just add your declarations to a global declaration file, anywhere in your project.

Further, instead of using var and namespace, just use interface.

Eg. in the root of your directory, you can easily add

// index.d.ts
interface Foo {
  bar: () => void
}

interface Baz { some: number }

answered Aug 18, 2016 at 20:52

Pelle Jacobs

2,5891 gold badge23 silver badges28 bronze badges

1 Comment

Telokis Over a year ago

This doesn't work. After typing exactly this code inside a typings/index.d.ts file, I still don't get autocomplete when I type Fo followed by Ctrl + Space. Moreover, I'd like those typings to not be globals but rather dependent on the imported file. For exemple, I'd like to have a typings/Foo.d.ts that is used when I include src/models/Foo.js somewhere. Is this even possible?

Joelster · Accepted Answer · 2016-09-05 09:32:16Z

2

I had the same issue and discovered that the editor (VSCode) was looking in the wrong directory for the file, problem was solved by relative referencing the correct path, the specific path will vary, but in my example it was:

/// <reference path="../../typings/index.d.ts" />

index.d.ts contains the following:

/// <reference path="globals/core-js/index.d.ts" />
/// <reference path="globals/jasmine/index.d.ts" />
/// <reference path="globals/node/index.d.ts" />

and my directory/file structure appears as follows:

answered Sep 5, 2016 at 9:32

Joelster

3591 gold badge4 silver badges16 bronze badges

2 Comments

Voreny Over a year ago

For me the problem is not getting the Intellisense for custom modules, not ones installed with typings, so unfortunately this is not the solution for me. Thanks for trying, though!

Joelster Over a year ago

Ah understood! I'll let you know if I come across anything else that might help.

Collectives™ on Stack Overflow

How to use Typescript definitions to get Intellisense for my own Javascript services in VS Code?

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related