Typescript - The Better JavaScript?

Video: https://www.youtube.com/watch?v=XUhvFYdgzc0

We build the web on JavaScript. It feels like everybody is using it for everything these days. But with a larger code base JavaScript is getting harder and harder to structure and maintain. We will look at how TypeScript and its tooling can help you with your daily development experience and how to prevent errors even before running your unit tests.

Transcript

1. Typescript The Better JavaScript? Christian Köberl / / github.com/derkoe @derkoe
2. Christian Köberl Software Architect / Developer Develops webapps since 1999
3. 26 countries, 160 products, 450 employees More than 1M vehicles sold per year Datacenter 1500 hosts, 60 TB RAM, 1500 TB disk Powering Mobility Business for a Smart World
4. Why TypeScript?
5. •
7. Code Completion aka Intellisense
8. Refactoring Car → Vehicle
9. Backend APIs → TS
10. Felix Rieseberg, »How I Learned to Stop Worrying & Trust the Compiler« TypeScript at Slack
11. Using Future ECMAScript Features async/await Decorators (@)
12. ES6 Classes Types? class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } } let person = new Person(1, 2); person.mama = 'Mia'; person = Math.sqrt(person);
14. TypeScript TypeScript ES6 / ES2016 ES5 Statically-typed superset of ES5 and ES2015/16 Developed by Anders Hejlsberg / Microsoft 2012
15. Typescript vs ES6 vs ES5 export class Person { private dateOfBirth?: Date; constructor(private firstName: string, private lastName: string) { } toString() { return `${this.firstName} ${this.lastName} (${this.dateOfBirth})`; } }
16. Type Declarations let a: number; function toLowerCase(a: string|null) { return a ? a.toLowerCase() : null; } type AorB = 'A'|'B'; const x: AorB = 'A'; type BiFunc = (a: number, b: number) => number;
17. Interfaces interface Person { firstName: string; lastName: string; dateOfBirth?: Date; } class Employee implements Person { constructor(public firstName: string, public lastName: string) { } }
18. Type Compatibility Structural Typing aka Duck Typing const p = { firstName: 'Chris', lastName: 'Kö' }; const person: Person = p; person.dateOfBirth = new Date();
19. Type Inference const name = 'Christian'; // no type needed // even no types for complex stuff document .getElementById('id') .addEventListener('click', ev => alert(`${ev.clientX}, ${ev.clientY}`));
20. Generic Types class Stack<T> { private items: T[] = []; public push(item: T) { this.items.push(item); } public pop(): T { return this.items.pop(); } } const stack = new Stack<string>(); stack.push("a"); const a = stack.pop(); // a is a string
21. Integrating JavaScript TypeScript Declaration Files - d.ts Just types, declarations and interfaces / DefinitelyType Typings
22. Modules and Namespaces Modules correspond to ES6 modules export and import Namespaces are translated to IIFEs module pattern
23. Advanced Topics
24. Decorators Access control, Validation Logging, Profiling Frameworks (e.g. Angular) @Component({a = '1'}) // <<-- decorator class MyClass { @measure // <<-- decorator public doSomething() { // ... } }
25. Creating Decorators function measure(target: any, propertyKey: string, descriptor: PropertyDescriptor) { const originalFunction = descriptor.value; descriptor.value = function (...args: any[]) { const start = Date.now(); originalFunction.apply(target, args); console.log(`${propertyKey} with params "${args}" took ${Date.now() - start}ms`); } }
26. async/await since Typescript 2.3 for target ES5 function loadUserName(userId) { const url = `https://user-api/user/${userId}`; return fetch(url) .then(response => response.json()) .then(user => user.name); } async function loadUserName2(userId: string) { const url = `https://user-api/user/${userId}`; const response = await fetch(url); const user = await response.json(); return user.name; }
27. elm Similar Tools Flow is a static type checker for JavaScript. A transpiler from Java to TypeScript/JavaScript A delightful language for reliable webapps.
28. Summary Static type checking is awesome! (especially with TypeScript) Use ES2015 and ES.next features!
29. Thanks! Questions? PS: We are hiring!
30. Image Credits Title Christian Köberl: © Christian Köberl All others © Porsche Informatik Rotating arms: Imgur
31. References, Further Readings Bowden Kelly: TypeScript The Language You Already Know TypeScript Weekly Oliver Zeigermann: Typed JavaScript using TypeScript and Flow