For the last six months at work, I have been writing all of my JavaScript by using TypeScript. Although it is not perfect, I can’t imagine writing JavaScript without the static typing TypeScript provides.
Static typing enables the compiler to check that the operations my JavaScript performs are valid, this feature alone has saved me from many frustrating bugs.
The very nature of JavaScript is dynamic. Therefore, for TypeScript to be able to perform static type checking, the types must be defined. To provide this information, we must supply TypeScript with type definition files (.d.ts).
In visual studio 2015, Intellisense understands type definition files and uses them to improve autocompletion.
These definitions are extremely useful, if not required when working with TypeScript. Sadly with the current tooling available the creation of these useful files is very time-consuming.
Luckily, the popular DefinitelyTyped project on GitHub, which has more than 1000 contributors, together have written definitions for more than 1000 JavaScript libraries. This community also regularly improves previously written definitions. Therefore, it is important to keep the definitions in your project up to date.
Trying to keeping your TypeScript definitions from DefinitelyTyped up to date manually would be a difficult if not verging on an impossible task, therefore we should the tools available in Visual Studio 2015.
There are two main options: First download your DefinitelyTyped definitions from nuGet as packages. It’s quick, easy and the nuGet feed is regularly updated. However, I find this can become tedious, having to constantly update the nuGet packages.
The other option is to use a task runner, javaScript tools which can automate performing simple tasks. Although it’s more difficult to set up, this option provides a greater degree of automation. By increasing automation, we can reduce the chance of human error, which in turn provides a more robust and easier to manage solution.
Let’s create a Gulp simple task which will fetch the lastest version of the definitions from the DefinitelyTyped project. (Why did I choose Gulp over Grunt? Click here to find out why!)
Example: Angular TypeScript definition fetched each time the project is opened
We going to use gulp_tsd this allows us automate the process of using tsd, a tool provided by the DefinitelyTyped community, to fetch TypeScript definitions.
1. Add the NPM packages
- Create a new package.JSON file in the root of the project
2. Add the Gulp task
- Create a new gulpfile.js file in the root of the project
- Copy and paste the following into the new file
3. Add the setting file for gulp_tsd plugin
- Create a new gulp_tsd.json file in the root of the project
- Copy and paste the following into the new file
4. Add the Configuration file for tsd
- Create a new tsd.json file in the root of the project
- Copy and paste the following into the new file
5. Test run the task
- Click show all files
- Check to see if your definitions are in the typing folder
It is important to not check the definitions as they are only used by the developer machine and should only be created by using the new Gulp task
6. Set the Gulp task to run on every Project open
- Open the Task Runner Explorer window.
- Right-click the task and select when you want it to run in the bindings menu.
- Choose “Project open”.
Feel free to tweet me comments, feedback or questions to @ChrisBriggsy.