Integrate TypeScript, AngularJS using Gulp and Grunt

Start using typescript with existing angularjs application using grunt, gulp tasks

Posted by Aditya Pratap Singh on July 15, 2015

Integrate TypeScript with AngularJS using Gulp and Grunt

TypeScript is gaining a lot of impetus due to its strong support for static typing in JavaScript and as a result is being adopted by all the major JavaScript frameworks including AngularJS, ReactJS and NodeJS. In order to integrate typescript we need a basic build task in our project to compile the typscript files to javascript. I have used both gulp and grunt to demonstrate the buld process for people using either of the 2.

Typescript is compiled using the typescript compiler tsc . There are npm packages for both grunt and gulp which provides the tsc available to us. We will see both the packages and step by step demonstartion to integrate them.

Grunt

grunt-typescript is the npm package which provides the typescript's tsc compiler. The detailed options for using the task is mentioned npm site. We can see the very basic steps required to integrate the task with grunt here.

  1. Install the grunt-typescript npm package.
  2. npm install grunt-typescript --save
  3. Install the tsd package. This will be used for getting the TypeScript definition files .tsd, which provide type definitions for variables and members in TypeScript.
  4. npm install tsd --save
  5. Install the typescript definition files for libraries being used. In my case, I was using angular so I have installed the tsd definition files for angular and jquery. jQuery is needed here as its a dependency required by angular.
  6. tsd install angular jquery
  7. Add a grunt task in Gruntfile.js to be used to compile typescript files. The detailed options can be explored here

  8. That's it. Add the task to your build tasks default, serve, build, dev as shown in above snippet and you are good to go.



Gulp

gulp-typescript is a node package which makes the typescript compiler available as a module in gulp.

  1. Install the gulp-typescript npm package.
  2. npm install gulp-typescript --save
  3. Install the tsd package. This will be used for getting the TypeScript definition files .tsd
  4. npm install tsd --save
  5. Install the typescript definition files for libraries being used. In my case, I was using angular so I have installed the tsd definition files for angular and jquery. jQuery is needed as its a dependency required by angular.
  6. tsd install angular jquery
  7. Add a gulp task in gulpfile.js to be used to compile typescript files. The detailed options can be explored here. A sample task to compile typescript is shown as below.