A introduction to Typescript language as a way to improve javascript development both on client and server side.

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

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

3. Problems
what haunts you during Javascript
development?

4. It is not typesafe
var a = 3
var b = 5
a++
c = a + b
a = "hello"

5. 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);

6. 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();} }

7. Long feedback cycle
● Errors come only at runtime
● And not even that in some cases
● Difficult to debug the minified js files

8. Can Typescript help us?
What’s in the menu

9. Typescript - what is it?
A language which compiles to clean Javascript

10. Virtually no learning curve
It is superset of Javascript

11. Static compilation
Catches errors early

12. Provides syntactic sugar
Reduces lots of boilerplate code

13. Readable code
Easy to understand and follow

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

15. Better tools
● Refactoring
● Intellisense
● Debugging support
● Code navigation

16. Say no to self = this
No more context related issue

17. Open Source
Community can make it even better

18. ECMA Script 6
Adopting many modern language features

19. Let’s dive in
Show me the real stuff

20. 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];

21. 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");
}

22. 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);
}

23. 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);
});

24. Classes
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");
greeter.greet();

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

26. 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”);
}
}

27. 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;
};

28. 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;
}

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

30. Modules
Internal Modules
module Expertalks {
export class Session{
title: string;
speaker: string;
}
}
var session = new Expertalks.Session();

31. Modules Continued
External Modules
● CommonJS
● AMD
import shapes = require('Shapes');

32. 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

33. 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/