large scale javascript with typescript
TRANSCRIPT
![Page 1: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/1.jpg)
LARGE SCALE JAVASCRIPTWITH TYPESCRIPT
HH.JS - JULY 2013Oliver Zeigermann, http://zeigermann.eu
![Page 2: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/2.jpg)
TYPESCRIPTValid JavaScript is also valid TypeScript
Almost ECMAScript 6 with declared types
Introduces a compiler step
![Page 3: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/3.jpg)
NEW CONCEPTS OF THELANGUAGE
Declared Types
Classes and Inheritance
Modules
Interfaces
External declarations
![Page 4: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/4.jpg)
DECLARED, STATIC TYPINGvar name: string = "Olli";
function doIt(p1: number, p2: boolean, p3: string): string { if (p2) { return p3; } else { return "" + p1; }}
![Page 5: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/5.jpg)
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
![Page 6: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/6.jpg)
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"
![Page 7: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/7.jpg)
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());
![Page 8: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/8.jpg)
MODULESmodule CustomerModule { class Person { // ... }
export class Customer extends Person { // ... }}
// new CustomerModule.Person(...); // => undefinednew CustomerModule.Customer(...); // => cool
![Page 9: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/9.jpg)
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
![Page 10: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/10.jpg)
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
![Page 11: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/11.jpg)
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;}
![Page 12: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/12.jpg)
EXCERPT FROM LIB.D.TS #2interface Node extends EventTarget { nodeType: number; previousSibling: Node; localName: string; parentNode: Node; nextSibling: Node; // ...}
![Page 13: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/13.jpg)
TOOLStsc: Command Line Tool for Compiler
WebStorm / Intellij IDEA
Visual Studio (Express for Web)
Syntax highlighting for other text editors (SublimeText, Emacs, Vim)
![Page 14: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/14.jpg)
AND THERE IS MORE...Mapping files
External module declarations for AMD /CommonJS
Enums
Generics
Casts
All the ES 6 goodness
![Page 15: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/15.jpg)
RESOURCESThese Slides on GitHub:
Code Samples on GitHub:
https://github.com/DJCordhose/typescript-hh-js
https://github.com/DJCordhose/typescript-sandbox
![Page 16: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/16.jpg)
EXTERNAL LINKS
Collection of external declaration files
![Page 17: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/17.jpg)
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
![Page 18: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/18.jpg)
CONCLUSION
![Page 19: Large Scale JavaScript with TypeScript](https://reader037.vdocuments.us/reader037/viewer/2022100517/55583924d8b42acb078b4a6a/html5/thumbnails/19.jpg)
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