JavaScript with TypeScript engine for an awesome IDE

As a front-end & javascript developer I have always been frustrated by the lack of good development tools.

All you have is some advanced text editor like Atom, Sublime, with no intellisense, and
poor autocompletion (Atom and Sublime autocompletion is only based on keywords finded in oppened files, no true intellisense at all).

Hopefully Microsoft guys rocked when creating TypeScript, a statically typed version of javascript, providing information about typings, intellisense, great autocompletion etc.

TypeScript is very nice, but I think it's only well suited for bundled front-end code. I find it over complicated to be used in a node js project. Moreover I understand that some dev prefer coding in pure javascript.

But once you try TypeScript, it's even more frustrating !

But one more time, Microsoft guys rocked with a brilliant idea : as Javascript is valid TypeScript, why shouldn't we use the awesome TypeScrip engine with Javascript ?

The idea was brilliant, and will transform Visual Studio Code into a first class IDE for javascript development !

With a good set up, Visual Studio Code will do two things for you :

  • Analyse your code to provide intellissense over it.
  • Use TypeScript definition files (**.d.ts) to provide intelissense over node_modules and environment variables.

Let's see who to take benefit of this technlogy on a simple nodejs plugin.

Project setup

For the example I will take a small express plugin I build some days ago

VS Code use an equivalent of tsconfig.json to configure the project. It will be (obviously) jsconfig.json.

In this file, located at the root of the project, we will define :

  • compilerOption :
    • target : the javascript standart of your code (es6, el7...).
    • module : the module standard used in the project (commonjs...), mandatory to allow full intellissense !
  • include/exclude : lists of global patterns of files to be included/excluded by intellissense.
  • files : list of files to include in intellissense (but we will prefer global include/exclude).

That's how it looks like for a simple project :

{
  // See http://go.microsoft.com/fwlink/?LinkId=759670
  // for the documentation about the jsconfig.json format
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
    "bower_components",
    "jspm_packages",
    "tmp",
    "temp",
    "typings/browser.d.ts",
    "typings/browser"
  ]
}

Typing definition files

One of the geat feature of TypeScript int the ability to share typing definition files (**.d.ts) to provide intellissense over third party modules.

With it's new engine, VS Code can include these files to an provide this power to Javascript to ! It allow us to use these files for Javascript !

To manage typing definitions we will use typings, a nice command line tool. You can install in by typings npm install -g typings in a command line.

The usage of typings is simple.

We start by calling the commant typings init at the root of our project to generate typings.json and the typings directory.

Once done, you must include/exclude typings you need/don't in your jsconfig.json file.

There is two main typings: main and browser.

Here want to use the main definitions, so we will exclude browser definitions from our project by addind typings/browser.d.ts and typings/browser to the exclude list (See the sample hereover).

If you are developing a front-end project, exclude main libraries. Never include both, it will create duplication errors.

Now we can start install libraries with the install command :

> typings install node express express-serve-static-core serve-static ... --ambiant --save

After that, open Javascript file, require express, and let the magic happening !

Some tips and trics :

  • Typings does not always install dependencies, for example with express, i had to install node, express-serve-static-core and serve-static. So be sure to have everything installed. If you issue some incomplete types, then you should be missing something.
  • The tag --ambiant tels typings to search definition in the tsd repository. If the flag is not provided it will search for embeded definitions in npm repositories. Non ambiant definition are the future of typings and should became a standart, but for now there is only a little number of module implementing it...

Create embeded typing for your npm modules !

As said previously, the futur of typings is the embeded definition file.

When running typings install {libraty} without the --ambiant flag,
typings will look for the typings field in the package.json of the npm module.

If this file is provided it will download and install it.

The big benefit is that typings implement a kind of standard to provide typing definitions in npm modules.

{
    "name": "foo",
    "author": "Vandelay Industries",
    "version": "1.0.0",
    "main": "./lib/foo.js",
    "typings": "./lib/foo.d.ts"
}

And moreover, providing a typing file has 2 advantages :

  • Provide a better documentation about the interface of your module.
  • Provide intelissense to the users of your module.

For type definition file writing, please refer to the official documentation : http://www.typescriptlang.org/docs/handbook/writing-declaration-files.html