$30 off During Our Annual Pro Sale. View details »

Typescript - The Better JavaScript?

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.

Christian Köberl

May 12, 2017
Tweet

More Decks by Christian Köberl

Other Decks in Programming

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. None
  6. Code Completion aka Intellisense

  7. Refactoring Car → Vehicle

  8. Backend APIs → TS

  9. Felix Rieseberg, »How I Learned to Stop Worrying & Trust

    the Compiler« TypeScript at Slack
  10. Using Future ECMAScript Features async/await Decorators (@)

  11. 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);
  12. None
  13. TypeScript TypeScript ES6 / ES2016 ES5 Statically-typed superset of ES5

    and ES2015/16 Developed by Anders Hejlsberg / Microsoft 2012
  14. 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})`; } }
  15. 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;
  16. Interfaces interface Person { firstName: string; lastName: string; dateOfBirth?: Date;

    } class Employee implements Person { constructor(public firstName: string, public lastName: string) { } }
  17. Type Compatibility Structural Typing aka Duck Typing const p =

    { firstName: 'Chris', lastName: 'Kö' }; const person: Person = p; person.dateOfBirth = new Date();
  18. 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}`));
  19. 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
  20. Integrating JavaScript TypeScript Declaration Files - d.ts Just types, declarations

    and interfaces / DefinitelyType Typings
  21. Modules and Namespaces Modules correspond to ES6 modules export and

    import Namespaces are translated to IIFEs module pattern
  22. Advanced Topics

  23. Decorators Access control, Validation Logging, Profiling Frameworks (e.g. Angular) @Component({a

    = '1'}) // <<-- decorator class MyClass { @measure // <<-- decorator public doSomething() { // ... } }
  24. 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`); } }
  25. 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; }
  26. elm Similar Tools Flow is a static type checker for

    JavaScript. A transpiler from Java to TypeScript/JavaScript A delightful language for reliable webapps.
  27. Summary Static type checking is awesome! (especially with TypeScript) Use

    ES2015 and ES.next features!
  28. Thanks! Questions? PS: We are hiring!

  29. Image Credits Title Christian Köberl: © Christian Köberl All others

    © Porsche Informatik Rotating arms: Imgur
  30. References, Further Readings Bowden Kelly: TypeScript The Language You Already

    Know TypeScript Weekly Oliver Zeigermann: Typed JavaScript using TypeScript and Flow