Typescript - A developer friendly javascript

A developer friendly Javascript
Pradip Hudekar
pradip.hudekar@equalexperts.com

Javascript
● What is it?
● Who uses it?
● Why?

Problems
what haunts you during Javascript
development?

It is not typesafe
var a = 3
var 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
Boolean
var isDone: boolean = false;
Number
var height: number = 6;
String
var name: string = "bob";
Array
var list:number[] = [1, 2, 3];
var list:Array<number> = [1, 2, 3];

Basic Types Continued
Enum
enum Color {Red = 1, Green = 2, Blue = 4};var c: Color =
Color.Green;
var colorName: string = Color[2];
Any
var list:any[] = [1, true, "free"];
list[1] = 100;
Void
function warnUser(): void {
alert("This method does not return anything");
}

Interfaces
Interfaces are treated as contract
interface Shape {
color: string;
}
function DrawShape(shapeToDraw: Shape) {
alert(shapeToDraw.color);
}
Typescript uses Duck-Typing
function DrawShape(shapeToDraw: {color:string}) {
alert(shapeToDraw.color);
}

Interfaces continued
Interfaces can be also created for functions
interface 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 function
function add(x: number, y: number): number {
return x+y;
}
Anonymous functionvar myAdd = function(x: number, y:
number): number {
return x+y;
};

Parameters
Optional parameter
function 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 Modules
module 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/

Typescript - A developer friendly javascript

More Related Content

What's hot (19)

Similar to Typescript - A developer friendly javascript (20)

Recently uploaded (20)

Typescript - A developer friendly javascript