Large Scale JavaScript with TypeScript

LARGE SCALE JAVASCRIPTWITH TYPESCRIPT

HH.JS - JULY 2013Oliver Zeigermann, http://zeigermann.eu

TYPESCRIPTValid JavaScript is also valid TypeScript

Almost ECMAScript 6 with declared types

Introduces a compiler step

NEW CONCEPTS OF THELANGUAGE

Declared Types

Classes and Inheritance

Modules

Interfaces

External declarations

DECLARED, STATIC TYPINGvar name: string = "Olli";

function doIt(p1: number, p2: boolean, p3: string): string { if (p2) { return p3; } else { return "" + p1; }}

CLASSESclass Person { name: string; // public is the default visibility private age: number; // either public or private

constructor(name: string, age: number) { this.name = name; this.age = age; }

toString(): string { return "Name: " + this.name; }}

var olli: Person = new Person("Olli", 42);console.log(olli.name); // => "Olli"olli.age; // => Error: Person.age' is inaccessible

INHERITANCEclass Customer extends Person { private id: number;

constructor(name: string, age: number, id: number) { super(name, age); this.id = id; }

toString(): string { return super.toString() + ", id: " + this.id; }}

var c1: Customer = new Customer("Oma", 88, 47);console.log(c1.toString()); // => "Name: Oma, id: 47"

STATIC PROPERTIESclass Customer extends Person { private static sequence: number = 1; public static nextNumber(): number { return Customer.sequence++; }

private id: number; constructor(name: string, age: number) { super(name, age); this.id = Customer.nextNumber(); } toString(): string { return super.toString() + ", id: " + this.id; }}var c1: Customer = new Customer("Oma", 88);console.log(c1.toString());

MODULESmodule CustomerModule { class Person { // ... }

export class Customer extends Person { // ... }}

// new CustomerModule.Person(...); // => undefinednew CustomerModule.Customer(...); // => cool

STRUCTURAL TYPING WITH INTERFACESinterface HasName { name: string;}

var olli: HasName = {name: 'Olli'};

olli.name; // goodolli.age; // not good, as not declared

olli = {name: 'Olli', age: 100};

olli.age; // still not good, as not declared

EXTERNAL DECLARATIONSAdds tooling and type checking to existingJavaScript libraries

Declarations disappear when compiled

TypeScript compiler comes with externaldeclarations for core and DOM libraries(lib.d.ts)

Work in progress for a lot of other libraries

EXCERPT FROM LIB.D.TS #1declare function parseFloat(string: string): number;

interface Function { apply(thisArg: any, ...argArray: any[]): any; call(thisArg: any, ...argArray: any[]): any; bind(thisArg: any, ...argArray: any[]): Function; prototype: any; length: number;}

EXCERPT FROM LIB.D.TS #2interface Node extends EventTarget { nodeType: number; previousSibling: Node; localName: string; parentNode: Node; nextSibling: Node; // ...}

TOOLStsc: Command Line Tool for Compiler

WebStorm / Intellij IDEA

Visual Studio (Express for Web)

Syntax highlighting for other text editors (SublimeText, Emacs, Vim)

AND THERE IS MORE...Mapping files

External module declarations for AMD /CommonJS

Enums

Generics

Casts

All the ES 6 goodness

RESOURCESThese Slides on GitHub:

Code Samples on GitHub:

https://github.com/DJCordhose/typescript-hh-js

https://github.com/DJCordhose/typescript-sandbox

EXTERNAL LINKS

Collection of external declaration files

Collection of external declaration files

Syntax files for other editors

Great introductory talk by Anders Hejlsberg

TypeScript with AngularJS

AngularJS + TypeScript : Controllers, BestPracticeGrunt Plugin for TypeScript

Version 0.9 with Generics

heise.de on TypeScript

Experience report Generics

TypeScript deep dive

CONCLUSION

TypeScript has the same semantics as JavaScript

Declared types bring you to the next level of (IDE)tooling

Analyzing Code

Refactoring

Code completion

Syntactic sugar for classes, inheritance, andmodules is nice

All added features aligned to ECMAScript 6

Interfaces and external declarations add thebenefits of TypeScript to pure JavaScript libraries

QUESTIONS /DISCUSSION

Oliver Zeigermann, http://zeigermann.eu