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?

Answer 1

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.

Answer 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:

Answer 3

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 }