Large Scale JavaScript with TypeScript

1,683 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,683
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Large Scale JavaScript with TypeScript

  1. 1. LARGE SCALE JAVASCRIPT WITH TYPESCRIPT HH.JS - JULY 2013 Oliver Zeigermann, http://zeigermann.eu
  2. 2. TYPESCRIPT Valid JavaScript is also valid TypeScript Almost ECMAScript 6 with declared types Introduces a compiler step
  3. 3. NEW CONCEPTS OF THE LANGUAGE Declared Types Classes and Inheritance Modules Interfaces External declarations
  4. 4. DECLARED, STATIC TYPING var name: string = "Olli"; function doIt(p1: number, p2: boolean, p3: string): string { if (p2) { return p3; } else { return "" + p1; } }
  5. 5. CLASSES class 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
  6. 6. INHERITANCE class 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"
  7. 7. STATIC PROPERTIES class 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());
  8. 8. MODULES module CustomerModule { class Person { // ... } export class Customer extends Person { // ... } } // new CustomerModule.Person(...); // => undefined new CustomerModule.Customer(...); // => cool
  9. 9. STRUCTURAL TYPING WITH INTERFACES interface HasName { name: string; } var olli: HasName = {name: 'Olli'}; olli.name; // good olli.age; // not good, as not declared olli = {name: 'Olli', age: 100}; olli.age; // still not good, as not declared
  10. 10. EXTERNAL DECLARATIONS Adds tooling and type checking to existing JavaScript libraries Declarations disappear when compiled TypeScript compiler comes with external declarations for core and DOM libraries (lib.d.ts) Work in progress for a lot of other libraries
  11. 11. EXCERPT FROM LIB.D.TS #1 declare 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; }
  12. 12. EXCERPT FROM LIB.D.TS #2 interface Node extends EventTarget { nodeType: number; previousSibling: Node; localName: string; parentNode: Node; nextSibling: Node; // ... }
  13. 13. TOOLS tsc: Command Line Tool for Compiler WebStorm / Intellij IDEA Visual Studio (Express for Web) Syntax highlighting for other text editors (Sublime Text, Emacs, Vim)
  14. 14. AND THERE IS MORE... Mapping files External module declarations for AMD / CommonJS Enums Generics Casts All the ES 6 goodness
  15. 15. RESOURCES These Slides on GitHub: Code Samples on GitHub: https://github.com/DJCordhose/typescript-hh-js https://github.com/DJCordhose/typescript- sandbox
  16. 16. EXTERNAL LINKS
  17. 17. Collection of external declaration files Syntax files for other editors Great introductory talk by Anders Hejlsberg TypeScript with AngularJS AngularJS + TypeScript : Controllers, Best Practice Grunt Plugin for TypeScript Version 0.9 with Generics heise.de on TypeScript Experience report Generics TypeScript deep dive
  18. 18. CONCLUSION
  19. 19. 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, and modules is nice All added features aligned to ECMAScript 6 Interfaces and external declarations add the benefits of TypeScript to pure JavaScript libraries
  20. 20. QUESTIONS / DISCUSSIONOliver Zeigermann, http://zeigermann.eu

×