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.