ANGULAR : Typescript Fundamentals

Typescript Fundamentals

What is TypeScript?

Typescript is a superset of javascript.

Javascript offers us lot of features like Constructor function, Dynamic Types, Prototypes. These features comes under the ES5. We have new version of javascript is ES6. ES6 has class keyword and so on but problem with ES6 is, It is not supported by all browser so we have some issue there to support native ES6.

This is where Typescript comes in. Typescript is a wrapper to javascript. It compiles down to Javascript.

Typescript provides features like Strongly Typed, Generics, Interfaces.

Typescript code we need to compile to javascript to run in the browser.

Typescript Fundamentals and Typescript vs Javascript

Problem with javascript is, it does't supports OOPS concept like other programming languages like Java, C# . So that Javascript weakly typed language. Typescript resolved this problem by using strong typing or static typing, if you worked with java, .net, we defines variable with type, in typescript type is optional.

Strong typing makes our application more predictable and it also makes easier to debug them when something goes wrong.

Typescript also brings quite of few object oriented programming feature that we missed in javascript. It provides us the concept of classes, interfaces, constructors, access modifier like public and private, fields, property and generics and so on.

Another benefit of typescript we can catch error at compile time instead of runtime but not all kinds of error but lot of errors.

Great tooling

Typescript compiler transpile to javascript that our browser understand.

Type Annotations Example

Type Annotations are used to make contract between variables or functions. let's see the below example.

function doMultiply(n1: number, n2: number) {
    return n1*n2;
}

document.body.innerHtml = doMultiply(12, "12");

            

After Compile this file we will get error of Argument of type string is not assignable to parameter of type number.

Let's see one more example for type annotation with function parameters.

function doMultiply(n1: number, n2: number) {
    return n1*n2;
}

document.body.innerHtml = doMultiply();
            

After Compile this code we will get error of you have called this function with an unexpected number of parameters.

Interfaces

Typescript interfaces are not like others languages, so we need not to use keyword called implements, instead will check the value type using it.

Interfaces are powerful way to defining contract between client and server.

One of TypeScript’s core principles is that type-checking focuses on the shape that values have.

Let's see below Exmaple of interface.

export interface User {
    name: string;
    email: string;
    mobileNumber: number;
}

function displayUserName(user: User) {
    console.log(user.name);
}

let user = {name: 'Arif', email: 'xyz', mobileNumber: 12};

displayUserName(user);
            

Optional Properties

Each optional property denoted by a ? at the end of the property name in the declaration.

export interface User {
    name: string;
    email?: string;
    mobileNumber?: number;
}

function displayUserName(user: User) {
    console.log(user.name);
}

let user = {name: 'Arif'};

displayUserName(user);
                

The advantage of optional properties is that you can describe these possibly available properties.

Readonly and properties

Some Property need to be initialize only first time after that they are readonly we are not going to change the value.

interface Session {
    readonly uid: string;
}
            
Generics

Generics makes our component/object more reusable.