No content

TypeScript 

Hans Höchtl Technical Director @ Onedrop PHP, Java, Ruby Developer TYPO3 Solr, Neos 

Back in time to the beginning of 

JavaScript • Developed in 10 days back in 1995 • Target: Easy script interaction for hobby programmers in the browser, who can’t write Java • 1996 handed over to ECMA for standardization • ECMAScript 5 (spec. 1999) supported by all browsers (>=IE9) 

JavaScript - What happened? • CoffeeScript • Modularization (requireJS, AMD, etc.) • jQuery • NodeJS 

JavaScript - In the enterprise? • Not typesafe • No objects/classes • Hard to test • Bad Async handling 

TypeScript to the rescue • Released 2012 by Microsoft • Developed by Anders Hejlsberg (C#, Delphi) • Compiles to JavaScript (configurable version) • Full OOP • Type-safe • JavaScript compatible 

ES5
 JavaScript 1.5 ES2015 (ES6) TypeScript 

Buzzword bingo Types var / let / const Inheritance Promises Generics Fat arrow Interfaces Decorators public / private Moduls Class 

Usage npm install -g typescript tsc hello.ts class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user); var Student = (function () { function Student(firstName, middleInitial, lastName) { this.firstName = firstName; this.middleInitial = middleInitial; this.lastName = lastName; this.fullName = firstName + " " + middleInitial + " " + lastName; } return Student; }()); function greeter(person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user); 

Variable scoping var foo: string = 'bar'; let foo: string = 'bar'; const foo: string = 'bar'; var let const scope function block block immutable No No Yes Standard ever ES2015 / TS ES2015 / TS Usecase Not any more ~30% ~70% 

Variable scoping function f(condition: boolean, x: number) { if (condition) { let x = 100; return x; } return x; } f(false, 0); // returns 0 f(true, 0); // returns 100 

Variable scoping function f(condition, x) { if (condition) { var x_1 = 100; return x_1; } return x; } f(false, 0); // returns 0 f(true, 0); // returns 100 

Interfaces interface Person { firstName: string; lastName: string; middleName?: string; } function combinedName(person: Person): string { if (person.middleName) { return person.middleName + ' ' + person.lastName; } else { return person.firstName + ' ' + person.lastName; } } 

Inheriting interfaces interface Shape { color: string; } interface Square extends Shape { sideLength: number; } const square = {}; square.color = "blue"; square.sideLength = 10; 

Classes interface ClockConstructor { new (hour: number, minute: number): ClockInterface; } interface ClockInterface { tick(); } function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface { return new ctor(hour, minute); } class DigitalClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("beep beep"); } } class AnalogClock implements ClockInterface { constructor(h: number, m: number) { } tick() { console.log("tick tock"); } } let digital = createClock(DigitalClock, 12, 17); let analog = createClock(AnalogClock, 7, 32); 

Classes property visibility class Person { protected name: string; constructor(name: string) { this.name = name; } } class Employee extends Person { private department: string; constructor(name: string, department: string) { super(name); this.department = department; } public getElevatorPitch() { return `Hello, my name is ${this.name} and I work in $ {this.department}.`; } } let howard = new Employee("Howard", "Sales"); console.log(howard.getElevatorPitch()); console.log(howard.name); // error 

Interfaces extending Classes class Control { private state: any; } interface SelectableControl extends Control { select(): void; } class Button extends Control { select() { } } class TextBox extends Control { select() { } } class Image extends Control { } class Location { select() { } } 

Solving the "this" problem $('#any-button').on('click', function() { $(this).text('Clicked'); $.get('http://some.api/foo.json').success(function(){ $(this).text('Result'); }); } $('#any-button').on('click', function() { $(this).text('Clicked'); var btn = this; $.get('http://some.api/foo.json').success(function(){ $(btn).text('Result'); }); } 

Fatarrow $('#any-button').on('click', function() { $(this).text('Clicked'); $.get('http://some.api/foo.json').success(() => { $(this).text('Result'); }); } const sum = (a, b) => a+b const even = n => { const rest = n % 2 return rest === 0 } 

Generics function identity(arg: T): T { return arg; } let strOutput = identity("foobar"); let numOutput = identity(42); 

Generics class Cake {…} class Phone {…} class Box {…} function box (content: T): Box { const myBox = new Box(content); return myBox; } box(new Cake()) // a box with a cake box(new Phone()) // a box with a phone box(new Cake()) // also a box with a cake => inference 

Iterables let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2", } for (let i of list) { console.log(i); // "4", "5", "6" } 

Short break 

Modules • Scoping of variables (out of global) • Code re-use • Lazy/Async loadable • Encapsulation • DRY • Ease of testing 

Modules • No Modules (or IIFE) • CommonJS (node.js, SystemJS, Browserify) • AMD (require.js, SystemJS) • ES6 (for ES2015 compatible modules) https://0fps.net/2013/01/22/commonjs-why-and-how/ 

Modules export interface IBook { title: string pages: number } export default class Book implements IBook { constructor(public title: string, public pages: number){} } import Book, {IBook} from './book' export interface IBookshelf { books: IBook[] maxSize: number } export default class Bookshelf implements IBookshelf { books: IBook[] = [] constructor (public maxSize: number) {} addBook (book: IBook) { if (this.books.length < this.maxSize) { this.books.push(book) } } import Book from './book' import Bookshelf from './bookshelf' let myBookshelf = new Bookshelf(40) let tsHandbook = new Book('TS Handbook', 42) myBookshelf.addBook(tsHandbook) book.ts bookshelf.ts index.ts 

JavaScript integration • Already loaded JS libs are ambient modules • Typedefinition files [library].d.ts provide typed interfaces for TypeScript • Typings is a Definition Manager that loads, updates and maintains definition files https://github.com/Microsoft/TypeScriptSamples/tree/master/jquery 

[email protected] // [email protected]
 @hhoechtl
 http://blog.1drop.de