The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

With so much focus on moving code towards ES6 and making it future-proof, I wanted to show you how you can start adopting tools like TypeScript to create an app that can be easily upgraded and maintained.

$ npm install gulp-tsc --save-dev

Here’s the Gulp build task for TypeScript:

var typescript = require('gulp-tsc');
var paths = {
  sass: ['./scss/**/*.scss'],
  src: ['./src/*.ts']
};

gulp.task('compile', function(){
  gulp.src(paths.src)
  .pipe(typescript({
     emitError: false
   ))
  .pipe(gulp.dest('www/js/'))

})

In my next post, I’ll go over how to use the static typings in TypeScript to annotate your code.

Additional resources

Typescript Docs

Gulp-TSC

Visual Studio Code

Additional videos

Ionic and TypeScript Part 2

Ionic and TypeScript Part 3

Ionic and TypeScript Part 4

  • José Antonio Sánchez Reynaga

    You can use an editor that supports tsconfig.json like http://atom.io, sublime, and the like. Indeed the Atom.io plugin is pretty impressive. Its autocomplete, go to declaration, refactoring features are well implemented.

    • http://www.eekay.nl Edwin Klesman

      Not affiliated but a true newborn fan: Microsoft(yeah, that one)’s Visual Studio Code(https://code.visualstudio.com) is an awesome editor build upon the GitHub Electron Shell and supports TypeScript from the get-go.

    • http://devdactic.com/ Simon Reimler

      Which plugin especially did you use for jumping to declarations and everything?

  • http://www.raymondcamdencom/ Raymond Camden

    Just as an FYI – in order to run the Gulp script, you want to ensure you npm install first. That will get grunt and all the dependencies. That’s mostly obvious, but as it isn’t required for working with Ionic, you may not have ever ran that before in an Ionic project.

  • Adam Ryan Duren

    I noticed there is also a gulp-typescript npm package. Do they both do they same thing?

  • http://blog.oxiane.com Alain Boudard

    Hello, what do I miss if I have the infamous error :
    error TS2304: Cannot find name ‘angular’
    whan I run gulp compile ?

    Thanks !

    • http://blog.oxiane.com Alain Boudard

      Ok, I found that I could be missing the typings folder, and did run
      tsd install
      but do we have to manually add all the dependencies in all the .ts files then ?

      Thank you !

      • xiaolong97427

        Hello, I have the TS2304 and TS2339 problems. How di you solve it ?
        Thanks

  • jetmiller

    your gulp task is wrong (you forgot a bracket):

    gulp.task(‘compile’, function(){
    gulp.src(paths.src)

    .pipe(typescript({
    emitError: false
    }))
    .pipe(gulp.dest(‘www/js/’));

    })

    • rinogo

      Just a minor correction to help others – the omitted character is actually a closing curly brace, or “}”. You can see it on jetmiller’s fourth-to-last line.

  • Bernardo Gomes

    Hey Mike !
    Thanks for this video! And keep this great work !

  • https://www.noodl.io Noodlio

    Does Ionic prefer Typescript? I recall a meetup in London where Max had a discussion on that matter.

  • Martin Pultz

    Using a clean install of Ionic exported from Ionic Creator when I follow your example I can’t compile. Ionic throws these errors:

    $ gulp compile
    [14:52:09] Using gulpfile D:projectsappmobilegulpfile.js
    [14:52:09] Starting ‘compile’…
    [14:52:10] Finished ‘compile’ after 15 ms
    [14:52:10] Compiling TypeScript files using tsc version 1.7.5
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(8,1): error TS2304: Cannot find name ‘angular’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(14,15): error TS2339: Property ‘cordova’ does not exist on type ‘Window’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(14,33): error TS2339: Property ‘cordova’ does not exist on type ‘Window’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(15,7): error TS2304: Cannot find name ‘cordova’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(17,15): error TS2339: Property ‘StatusBar’ does not exist on type ‘Window’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/app.ts(19,7): error TS2304: Cannot find name ‘StatusBar’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/controllers.ts(1,1): error TS2304: Cannot find name ‘angular’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/directives.ts(1,1): error TS2304: Cannot find name ‘angular’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/routes.ts(1,1): error TS2304: Cannot find name ‘angular’.
    [14:52:12] [tsc] > D:/projects/app/mobile/src/services.ts(1,1): error TS2304: Cannot find name ‘angular’.
    [14:52:12] Failed to compile TypeScript: Error: tsc command has exited with code:2

    Any tips on what might be wrong?

    • Martin Pultz

      I got some of this fixed watching the second video, but still can’t get rid of:

      $ gulp compile
      [16:03:21] Using gulpfile D:projectsappmobilegulpfile.js
      [16:03:21] Starting ‘compile’…
      [16:03:21] Compiling TypeScript files using tsc version 1.7.5
      [16:03:23] [tsc] > D:/projects/app/mobile/src/app.ts(15,58): error TS2339: Property ‘Keyboard’ does not exist on type ‘CordovaPlugins’.
      [16:03:23] [tsc] > D:/projects/app/mobile/src/app.ts(16,33): error TS2339: Property ‘Keyboard’ does not exist on type ‘CordovaPlugins’.
      [16:03:23] Failed to compile TypeScript: Error: tsc command has exited with code:2
      [16:03:23] Finished ‘compile’ after 2.54 s

      Any ideas on removing these last two?

      • Seika85

        After you added TSD and ran `tsd install ionic cordova –save` also run
        `tsd install cordova-ionic –save`.
        This will setup the needed dependencies.

    • Shu Lin

      How did you solve this problem? I am having the same problem now. Thanks!

  • Ionic Facebook

    Property ‘cordova’ does not exist on type ‘Window’

    ionic 2