Build Your First Mobile App With Ionic 2 & Angular 2 - Part 3
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";
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";
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();
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();
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);
}
With the arrow function syntax, this becomes:
function updateTime() {
var time = new Date();
setInterval(() => this.time = new Date(), 1000);
}
'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.
0 comments