All the ES6 and TypeScript you need to know for Angular 2 with an example

Screen Shot 2016-01-24 at 7.43.10 PM

Angular 2 Beta is here, therefore is time to get on it.

Here is a Todo List as demo.

Git repository

To work effectively with Angular 2 we need to understand some concepts from ES6 and TypeScript, here the breakdown.

From ES6 we need to know:

Import/Export

Import/Export work as they sound, it allows you to share objects/methods/components between files. Below we define message in file1.ts and share it with file2.ts

file1.ts

export var message = "hello"

Then you can import into file2.ts :

file2.ts

import {message} from "./file1.ts";
console.log(message); //"hello"

Classes

The class syntax gives you an alternative to constructor functions:

Class contstructors

Pass the values your class instance will need into the constructor as follows:


class Person{
    constructor(name){
        this.name = name;
    }
}

var angular = new Person("Angular 2");
console.log(angular); //Angular 2

Class Methods
You declare a method that you call on instace of the class with myMethod(){}:

class Person{
    constructor(name){
        this.name = name;
    }

    speak(){
        console.log("Hi, my name is ", this.name);
    }
}

var maxc = new Person("Max");
maxc.speak(); //"Hi, my name is Max"

Use a ` to have a string span across multiple lines, no more ‘+’.

var message = `bleep
    bloop
        blorp
bling`;

Multiline strings allow to create templates easily in Angular 2:

let dom = `<h1>This is a template</h1>`;

Fat Arrows

Use fat arrows as a shorthand for functions that don’t need a context (functions without this). You’ll use them most often for:

  • Array methods: map, filter, reduce
  • Event handlers: addEventListener('click', (event)=> console.log(event))
  • Functional style/pure functions/lamdas: let square = x => x * x;
setInterval(()=> console.log('tick'), 1000); //logs 'tick' every second
myArray.map((item)=> item + " :)"); //creates a new array with a smiley on each item

From TypeScript we need to know:

Typescript was created by Microsoft (I know it sounds weird that Google wanted to use it, but there are good reasons for it, keep your mind open) and there is not much we need to know to use it with Angular 2.

Class Properties

You can define and initialize properties:


class Person{
    name = "John";
}

Constructor Properties Shorthand

The following definition:


class Person{
    name;

    constructor(name){
        this.name = name;
    }
}

can be shortened to:


class Person{
    constructor(public name){}
}

Decorators

Most of Angular 2’s api is provided through Decorators. We don’t need to learn how to write them from scratch, just how to use them.

Decorators work on class, properties, methods, and parameters. Decorators affiliate to classes by just positioning them above/next the class, that simple, just remember not adding a ; after the decorator or it won’t work on the class.

The most popular decorator in Angular 2 is @Component(), we use it to define the selectors, templates, directives, pipes, etc.


@One()
class Person{
    @Two() name;

    @Three() myFunction(){}

    constructor(@Four() myParam){}
}

Those are the ES6 and Typescript basics you need to know to start developing with Angular 2. Stay tuned for the next article explaining how the demo was created.

To catch up fast with Angular 2 I suggest to take a look at the video tutorials at egghead.io.

I am originally from Venezuela but I have been living in Austin, Texas for the last 8 years. Web development has been part of my life for more than a decade; It started in the middle of my College years and by the time I got my bachelors degree in Electronics Engineering I was already known for delivering complex projects while delivering a good user experience.