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

GitHub @pankajparkar Twitter Follow

@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

ES

Next

.

.

.

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?

  1. You could directly install Visual Studio Plugin on VS2013 & VS2015
  2. 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.

  1. Classes
  2. Functions
  3. Interfaces
  4. Generics
  5. 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

Flexible Typing

enum Language {
    Java,
    CSharp,
    Javascript
}

// Sample usage
var language = Language.Java;

// Error `string` is not assignable to type `Language` 
// Safety
language = "not a member of card suit";

Alternative to Typescript

  • Use pure javascript
  • Use javascript patterns.

Q & A

Thank You

Learn Typescript

By Pankaj Parkar

Made with Slides.com

Learn Typescript

Learn Typescript

  • 932

More from Pankaj Parkar