In this lesson we will see TypeScript interfaces. Topics on this page (not covered by ES6):

Table of Contents

• Interfaces
• Classes
• Generics
• Decorators

What are Interfaces

Interface is a contract that defines types. It is collection of properties and methods without the implementation details.

Interfaces allow us to define our own types, types that the TypeScript compiler can then check and make sure we're using correctly. This type checking is done during compile time. That is, using an interface makes the TypeScript compiler check if variables fill the contract (have the structure) defined by the interface. As occurs in other programming languages, TypeScript does not require an object to have the exact same structure as defined by the interface. To be considered valid, objects can have any shape as long as they define the functions and properties required by the interface that they implement.

To summarize: Interfaces allow us to create contracts other classes/ objects have to implement We can use them to define custom types without creating classes Interfaces ARE NOT compiled to JavaScript! It's just for checking/ validation done by our TypeScript compiler.

Interface example of our User type:

// Interfaces allow us to create contracts other classes/ objects have to implement
// We can use them to define custom types without creating classes
// Interfaces ARE NOT compiled to JavaScript! It's just for checking/ validation done by our TypeScript compiler

// Example interface

interface User {
    username: string;
    password: string;
    confirmPassword?: string; // Optional property => Does not have to be implemented
}

let user:User;

// This value does not satisfy the interface => Compilation error
// user = { anything: 'anything', anynumber: 5};

// This value does satisfy the interface
user = {username: 'max', password: 'supersecret'};

interface Point {
    x: number;
    y: number;
}
function getDistance( pointA: Point, pointB: Point ) {
    return Math.sqrt(
        Math.pow( pointB.x - pointA.x, 2 ) +
        Math.pow( pointB.y - pointA.y, 2 )
    );
}
var result = getDistance(
    { x: -2, y: -3 }, { x: -4, y: 4 });

Interface example with functions:

// Interfaces allow us to create contracts other classes/ objects have to implement
// Interfaces can also contain functions (without the function body - as it only is a blueprint/ requirement)

interface CanDrive {
    accelerate(speed:number): void;
}

let car:CanDrive = {
    accelerate: function (speed:number) {
        // ...
    }
};

More details on TypeScript interfaces can be found here.

Classes

Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components, but this may feel a bit awkward to programmers more comfortable with an object-oriented approach, where classes inherit functionality and objects are built from these classes. Starting with ES6 JavaScript supports object-oriented class-based approach. In TypeScript, we allow developers to use these techniques too, and compile them down to JavaScript that works across all major browsers and platforms.

There 2 scopes in Javascript: local and global. In TypeScript a nes scope is added: class scope. This means that like in Java we can define private field inside a class. Thus in TypeScript we have public, private, and protected modifiers.

Example:

class Mamal
{
    private nickname: string;
    constructor( nickname: string = "Noname" ) {
        this.nickname = nickname;
    }

    public getNickname():string {
        return this.nickname;
        }
}
class Cat extends Mamal
{
    private family: string = "Felidae";
    constructor( nickname: string ) {
        super( nickname );
    }
    public getFamily():string {
        return this.family;
    }
}

For more information see here.

Generics

With generics we are able to create a component that can work over a variety of types rather than a single one. For example:

function identity(arg: T): T {
        return arg;
}

The compiler setsthe value of T for us automatically based on the type of the argument we pass in.

More details on TypeScript generics can be found here.

Decorators

Decorators are heavily utilized by Angular 2 and it is a critical feature that rounds out the type story. Decorators are denoted with the @ syntax and can be attached to classes, methods or parameters to attach metadata or behavior about that class, method or parameter at run time. Angular uses decorators to mark classes as @Component, @Directive, @Pipe or @Injectable so that the framework can validate the kind of code the developer is intending to provide to optimize runtime performance.

More details on TypeScript decorators can be found here. Future JavaScript support for decorators is planned.