Build Your First Mobile App With Ionic 2 & Angular 2 - Part 3

http://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2-part-3/

20 January 2016 on Ionic 2, Angular 2, TypeScript | 3 Comments

The Ionic 2 and Angular 2 frameworks are both built with TypeScript and while you don't need to write your own code in TypeScript, it is recommended by both the Angular and Ionic teams. Let's find out more about TypeScript and which concepts you need to understand before you can continue to build your first Ionic 2 app.

This tutorial is for Ionic 2, you can find the Ionic 1.x tutorial here.

This tutorial is part of a multi-part series:
Part 1 - Introduction to Hybrid Mobile Apps
Part 2 - Set Up your Development Environment
Part 3 - Introduction to TypeScript & ES6 (this post)
Part 4 - Introduction to Angular 2
Part 5 - Build an Ionic 2 App
Part 6 - Navigating between Pages
Part 7 - Test on Emulators and Mobile Devices

What is ES5/ES6?

As you may know, the version of JavaScript that is currently supported in all browsers is ES5 (ECMAScript 5). The latest version is ES6 (officially ES2015) which is a superset of ES5. This means that you can still write ES5 code in ES6 since it only adds new features.

Not all the ES6 features are currently supported in the browsers. So if you want to write your code in ES6, there are transpilers like Babel, which compile your code to ES5 as part of your development process.

ES6 adds many new features to ES5, like classes, arrow functions and module loaders and we'll have a look at some of these later.

We can build our Ionic 2 and Angular 2 apps using only ES5 or ES6, but as I mentioned before, the recommended language is TypeScript.

What is TypeScript?

TypeScript is a superset of ES6, so it includes all of the new features of ES6 and adds the ability to declare variables as a specific type.

A very simple example is when you declare a variable as a number and then try to put a string value into it.

var index: number;  
index = "this is a string, not a number";  
var index: number;  
index = "this is a string, not a number";  

If your code editor supports TypeScript, you'll see that the second line will be marked as an error. When you run the TypeScript compiler it will also output that error.

Using types is optional, you can still write the following code as TypeScript code, and the compiler will happily accept that.

var index;  
index = "this is a string, not a number";  
var index;  
index = "this is a string, not a number";  

Let's have a look at some other TypeScript features we'll be using in our Ionic app.

Classes

A class has a constructor, properties and methods. Here is an example of what that looks like in TypeScript.

class User {  
    name: string;

    constructor(name: string) {
        this.name = name
    }

    sayHello() {
        console.log('Hello, I am', this.name);
    }
}

var user = new User('Ashteya');  
user.sayHello();  
class User {  
    name: string;

    constructor(name: string) {
        this.name = name
    }

    sayHello() {
        console.log('Hello, I am', this.name);
    }
}

var user = new User('Ashteya');  
user.sayHello();  

Let's have a look at what the Typescript compiler will output to ES5 code:

var User = (function () {  
    function User(name) {
        this.name = name;
    }
    User.prototype.sayHello = function () {
        console.log('Hello, I am', this.name);
    };
    return User;
})();
var user = new User('Ashteya');  
user.sayHello();  
var User = (function () {  
    function User(name) {
        this.name = name;
    }
    User.prototype.sayHello = function () {
        console.log('Hello, I am', this.name);
    };
    return User;
})();
var user = new User('Ashteya');  
user.sayHello();  

Arrow Functions

Arrow functions are a new and shorter syntax for writing anonymous functions. It's important to know that this in an arrow function references the parent, it doesn't define a new this context.

Let's look at an example in ES5 code:

function updateTime() {  
    var _this = this;
    var time = new Date();
    setInterval(function () { return _this.time = new Date(); }, 1000);
}
function updateTime() {  
    var _this = this;
    var time = new Date();
    setInterval(function () { return _this.time = new Date(); }, 1000);
}

With the arrow function syntax, this becomes:

function updateTime() {  
    var time = new Date();  
    setInterval(() => this.time = new Date(), 1000);
}
function updateTime() {  
    var time = new Date();  
    setInterval(() => this.time = new Date(), 1000);
}

I've only covered a very small part of the features in TypeScript, so I encourage you to check out the resources below and get more familiar with it. In Part 4 we'll have a look at what Angular 2 has to offer and we'll also have a look at decorators and modules.

Resources

TypeScript Handbook
TypeScript Playground
TypeScript Language Specificiation

Follow me on Twitter @ashteya and sign up for my weekly emails to get new tutorials.

If you found this article useful, could you hit the share buttons so that others can benefit from it, too? Thanks!