typescript - a developer friendly javascript

A developer friendly Javascript

Pradip Hudekarpradip.hudekar@equalexperts.com

Javascript

● What is it?

● Who uses it?

● Why?

Problems

what haunts you during Javascript development?

It is not typesafe

var a = 3var b = 5

a++c = a + b

a = "hello"

Can easily become complex

Ever tried writing Object Oriented Javascript?var __extends = this.__extends || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __();};var Snake = (function (_super) { __extends(Snake, _super); function Snake() { _super.call(this, "snake"); } Snake.prototype.crawl = function () { this.move(); console.log(this.name + ' is crawling'); }; return Snake;})(Animal);

Hard to keep track of context

Context hell

var myObject = {

AddChildRowEvents: function(row, p2) {

if(document.attachEvent) {

row.attachEvent('onclick',function(){

this.DoSomething();});

} else {

row.addEventListener('click',function(){

this.DoSomething();}, false);

}},

DoSomething: function() { this.SomethingElse();} }

Long feedback cycle

● Errors come only at runtime

● And not even that in some cases

● Difficult to debug the minified js files

Can Typescript help us?

What’s in the menu

Typescript - what is it?

A language which compiles to clean Javascript

Virtually no learning curve

It is superset of Javascript

Static compilation

Catches errors early

Provides syntactic sugar

Reduces lots of boilerplate code

Readable code

Easy to understand and follow

Scalable

Offers classes, modules, and interfaces to help you build robust components

Better tools

● Refactoring

● Intellisense

● Debugging support

● Code navigation

Say no to self = this

No more context related issue

Open Source

Community can make it even better

ECMA Script 6

Adopting many modern language features

Let’s dive in

Show me the real stuff

Basic Types

Booleanvar isDone: boolean = false;

Numbervar height: number = 6;

Stringvar name: string = "bob";

Arrayvar list:number[] = [1, 2, 3];

var list:Array<number> = [1, 2, 3];

Basic Types Continued

Enumenum Color {Red = 1, Green = 2, Blue = 4};var c: Color = Color.Green;

var colorName: string = Color[2];

Anyvar list:any[] = [1, true, "free"];list[1] = 100;

Voidfunction warnUser(): void { alert("This method does not return anything");}

Interfaces

Interfaces are treated as contractinterface Shape { color: string;}

function DrawShape(shapeToDraw: Shape) { alert(shapeToDraw.color);}

Typescript uses Duck-Typingfunction DrawShape(shapeToDraw: {color:string}) { alert(shapeToDraw.color);}

Interfaces continued

Interfaces can be also created for functionsinterface ErrorCallback { (message: string): boolean;}

function GetData(url:string,error: ErrorCallback){

if(!tryGetData(url)){

error(‘Could not get data’);

}

}

GetData(‘http://foo.bar’,function(message:string){

alert(message);

});

Classes

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

var greeter = new Greeter("world");

greeter.greet();

Implementing interfaces

interface Movable {

move();

}

class Animal implements Movable{ move() { console.log(“Animal is moving”); }}

Inheritance

interface Movable { move(); }

interface Animal extends Movable {

eat(food: Eatable);

}

class Tiger extends Cat{ move() { console.log(“Tiger is running ”); }

eat() { console.log(“Tiger is eating”); }}

Functions

Named functionfunction add(x: number, y: number): number { return x+y;}

Anonymous functionvar myAdd = function(x: number, y: number): number {

return x+y;

};

Parameters

Optional parameterfunction buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName;}

Default parameterfunction buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName;}

Generics

interface Lengthwise { length: number;}function loggingIdentity<T extends Lengthwise>(arg: T): T { console.log(arg.length);

return arg;}

Modules

Internal Modulesmodule Expertalks {

export class Session{

title: string; speaker: string;

}}

var session = new Expertalks.Session();

Modules Continued

External Modules● CommonJS

● AMD

import shapes = require('Shapes');

I have existing js libraries

Very easy to migrate

Type Definition files (.d.ts)declare class Bird{

public fly():void;

constructor();

}

Treasure of definitions @ DefinitelyTyped.org

References

TypeScript Language home

http://www.typescriptlang.org/

Interactive Playground

http://www.typescriptlang.org/Playground

Type definitions for popular JS libraries

http://www.definitelytyped.org/