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