Typescript: TSD to Typings and Compile with Gulp

As a typescript user, we need to have our typescript definitions put handled correctly and put in place. As I continue developing SkyHopper, I encountered some deprecations which one like the TSD aka TypeScript Definition manager for DefinitelyTyped. As of Jan. 26, 2016 it has been deprecated. So I choose to upgrade to typings from TSD to avoid future typings issues and get updated support from the open source community. As What the saying says “Better to do it sooner than later”.

Now, lets get rid first of TSD both locally and globally depends on your the setup:

  npm uninstall tsd -g --save-dev 

Please note that the old typings folder will be completely modified to fit the new structure in the new Typings architecture different from TSD. So if you custom made some typings file in this folder, please track them down manually or create a backup problem to avoid lost typings problems.

After that, We need to remove the typings folder to replace it with a new one.

  rm typings 

Now install typings and save it in your package.json as devDependency and install it globally so that we can use the CLI to install dependencies

  npm install typings --global --save-dev 

Now, we will change the old tsd.json file into typings.json format which looks and works completely different using the upgrade command.

Execute :

  typings init --upgrade 

You can now safely remove your tsd.json file which will be replaced to typings.json .

You can install a typings definition and save it. For example jQuery using Typings CLI (Global parameter is often used):

  typings install jQuery --save --global 

Now that we have install typings its time to install gulp for add a task runner like compiling and installing the typings definition.

  npm install -g gulp 

Now it will we will initialize a gulp task list

  gulp init 

Now you can modify the gulp task for example

 
var gulp = require('gulp');
var tsProject = ts.createProject('tsconfig.json');
var ts = require('gulp-typescript');

gulp.task('build', function() {
 return tsProject.src()
 .pipe(ts(tsProject))
 .pipe(gulp.dest('dist'));
});

So that it will automatically build your typings definition and compile them to and put them into a destination folder described in your tsconfig.json

If you have questions please comment below.

References to upgrade from tsd:

webpack+typescript
angular/universal-starter@cfb7b52

gulpjs+typescript
https://github.com/angular/answers-app/pull/27/files

gulpjs with typescript
https://gist.github.com/gdi2290/e544407980e261acc172