• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Large Scale JavaScript with TypeScript

Large Scale JavaScript with TypeScript






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Large Scale JavaScript with TypeScript Large Scale JavaScript with TypeScript Presentation Transcript

    • LARGE SCALE JAVASCRIPT WITH TYPESCRIPT HH.JS - JULY 2013 Oliver Zeigermann, http://zeigermann.eu
    • TYPESCRIPT Valid JavaScript is also valid TypeScript Almost ECMAScript 6 with declared types Introduces a compiler step
    • NEW CONCEPTS OF THE LANGUAGE Declared Types Classes and Inheritance Modules Interfaces External declarations
    • DECLARED, STATIC TYPING var name: string = "Olli"; function doIt(p1: number, p2: boolean, p3: string): string { if (p2) { return p3; } else { return "" + p1; } }
    • 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
    • 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"
    • 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());
    • MODULES module CustomerModule { class Person { // ... } export class Customer extends Person { // ... } } // new CustomerModule.Person(...); // => undefined new CustomerModule.Customer(...); // => cool
    • 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
    • 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
    • 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; }
    • EXCERPT FROM LIB.D.TS #2 interface Node extends EventTarget { nodeType: number; previousSibling: Node; localName: string; parentNode: Node; nextSibling: Node; // ... }
    • 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)
    • AND THERE IS MORE... Mapping files External module declarations for AMD / CommonJS Enums Generics Casts All the ES 6 goodness
    • RESOURCES These Slides on GitHub: Code Samples on GitHub: https://github.com/DJCordhose/typescript-hh-js https://github.com/DJCordhose/typescript- sandbox
    • 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
    • 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
    • QUESTIONS / DISCUSSIONOliver Zeigermann, http://zeigermann.eu