Learn Typescript

Pankaj P. Parkar

Technical Lead

Synerzip Softech India PVT LTD

Microsoft MVP (3 times)
Opensource Contributor
Stackoverflow Topuser for Angular and AngularJS
100k+ reps on Stackoverflow
.Net and Angular Developer
Currently working on React, GraphQL & Nodejs

@pankajparkar

About Me

Stack Overflow Contribution

Contribution Link

What we are going to cover?

Background
Introduction to Typescript
What is Typescript
Why should I use Typescript?
How it works?
How to use it?
Installation, setup and configuration.
Typescript Fundamentals

Backround

ES3

ES5

ES6

ES7

ES8

1997

2010

2015

2016

2017

What is Typescript?

Typescript is a typed superset of Javascript that compiles to plain Javascript. Any Browser.

Any host. Any OS. Open Source.

Static Typing

Whats wrong with JavaScript?

Javascript has dynamic typings.

Good

Variable can hold any type object value.
Types are determined on the fly.
Implicit type conversion.(eg. string to number)

Bad

Difficult to ensure which method should return which type without writing test.
Not all devs use ===
Implicit type conversion.

Code without Javascript patterns.

Code with Javascript patterns or Typescript.

Developer moving from server-side to client-side

.Net

Java

Ruby

PHP

- The TypeScript type system

- Your JavaScript is TypeScript

- Types inference

- Types are structural using classes/interface

- Type errors do not prevent JavaScript emit

- Types can be ambient

Why Typescript?

var name: Type = 'Value';

var myVariable = '123';

var foo = 123;
foo = '456'; // Error: cannot assign a `string` to a `number`

// Still it compiles to below
var foo = 123;
foo = '456';

How Typescript works?

Typescript file(.ts)

Typescript Compiler

(uses tsconfig.json)

Javascript file(.js)

How to use Typescript?

You could directly install Visual Studio Plugin on VS2013 & VS2015
Install it from npm using below command

Then convert typescript by using tsc command
Use tsconfig.json to configure typescript compiler options.
Other way is, you could go on typescript playground

http://www.typescriptlang.org/play/

npm install -g typescript

Demo

Fundamentals of Typescript.

Classes
Functions
Interfaces
Generics
Enums

Types

Boolean
string
Array
Tuple
Enum
Any
void

Classes

Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components.
Classes provide a way to define function, and it helps to implement prototypal inheritance

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

Inheritance using Classes

class Animal {
    name: string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        super.move(distanceInMeters);
    }
}
class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        super.move(distanceInMeters);
    }
}

Functions

Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components.
Classes provide a way to define function, and it helps to provide implement prototypal inheritance

let add = (x: number, y: number): number => { 
   return  x + y; 
};
add(1, 2);

Interface

By using Interface you can focus type-checking on the shape of object.

interface SquareConfig {
    color?: string;
    width?: number;
}

let newSquare: SquareConfig = {
   color: "white", 
   area: 100
};

Generics

Flexible Typing

function loggingIdentity<T>(arg: T): T {
    console.log(typeof T)
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}

Enums