Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript: Angular's Secret Weapon

593 views

Published on

Technical presentation given by Laurent Duveau at the House of Commons in Ottawa on April 25, 2017.

Thanks to Dan Wahlin for providing the original version of the slides. I added more content to fit in a 1h talk.

Published in: Technology

TypeScript: Angular's Secret Weapon

  1. 1. TypeScript Angular's Secret Weapon Laurent Duveau
  2. 2. TypeScript Angular's Secret Weapon Laurent Duveau
  3. 3. Laurent Duveau @LaurentDuveau http://angular.ac/blog Microsoft MVP and RD
  4. 4. • TypeScript ? • Weapons Types Classes Interfaces Enums • Tooling • Generics • Future Agenda
  5. 5. TypeScript?
  6. 6. Wait... Why TypeScript?
  7. 7. JavaScript The Good • It’s everywhere • Huge amount of libraries • Flexible The Bad • Dynamic typing • Lack of modularity • Verbose patterns (IIFE) In short: JavaScript development scales badly.
  8. 8. Wish list  Scalable HTML5 clientside development  Modular code  Easily learnable for Java or C# developers  Non-invasive (existing libs, browser support)  Long-term vision  Clean Js output (exit strategy)
  9. 9. TypeScript!  Scalable HTML5 clientside development  Modular code  Easily learnable for Java or C# developers  Non-invasive (existing libs, browser support)  Long-term vision  Clean Js output (exit strategy)
  10. 10. “TypeScript? It’s like coding JavaScript but without the pain” - Someone on Hacker News
  11. 11. TypeScript
  12. 12. TypeScript • Open Source • https://github.com/Microsoft/TypeScript • Apache License 2.0
  13. 13. Who's No. 1 in open source? Microsoft! Source: https://octoverse.github.com/
  14. 14. What is TypeScript? • TypeScript is a typed superset of JavaScript that compiles to plain JavaScript • Any browser. Any host. Any OS • Any valid JavaScript is valid Typescript Visual Studio 2015: NuGet Visual Studio 2017: built-in Visual Studio Code: built-in > npm install -g typescript
  15. 15. TypeScript ES2016 ES2015 ES5
  16. 16. How Does TypeScript Work? TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
  17. 17. Type Support
  18. 18. TypeScript Types Core types (optional but very helpful): • string • number • boolean • Date • Array • any Custom types
  19. 19. TypeScript Type Annotations name: string; age: number; isEnabled: boolean; pets: string[]; accessories: string | string[];
  20. 20. Why Use Types? @Component({...}) export class CalculatorComponent implements OnInit { total: number = 0; add(x: number, y: number) : number { return x + y; } } ngOnInit() { this.total = this.add('26', 20); } Oops!
  21. 21. Errors at compile-time! var a = 54 a.trim() TypeError: undefined is not a function var a: string = 54 a.trim() Cannot convert ‘number’ to ‘string’ JavaScript TypeScript runtime… compile-time!
  22. 22. “It feels just like writing JavaScript, but with a thin layer of type annotations that bring you the familiar advantages of static typing”
  23. 23. Types in Action
  24. 24. Classes
  25. 25. Class, ctor, public/private, prop class Auto { constructor(private _engine:string) { } get engine():string { return this._engine; } set engine(val:string) { this._engine = val; } start() { console.log("Take off using: " + this._engine); } } constructor get/set property blocks method
  26. 26. Classes in Action
  27. 27. Interfaces
  28. 28. What is an Interface? A code contract
  29. 29. Interface Example var person: ICustomer = { firstName: 'Dave', }; interface ICustomer { firstName: string; lastName: string; age?: number; } lastName: 'Johnson' Valid! Satisfied contract. Invalid! Didn't satisfy contract. Interface are only for compiler, do not generate Js code
  30. 30. Interfaces in Action
  31. 31. Enums
  32. 32. Enum enum Language { TypeScript, JavaScript, C# } var lang = Language.C#; var ts = Language[0]; // ts === “TypeScript”
  33. 33. Functions
  34. 34. Functions function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } function buildName(firstName: string, lastName = "Doe") { return firstName + " " + lastName; } optional param default param
  35. 35. Functions in Action
  36. 36. Tooling Support
  37. 37. Tooling Support Examples
  38. 38. Key Tooling Support Features Code Help/ Intellisense Refactoring Peek/Go To Find References
  39. 39. Tooling in Action
  40. 40. Generics
  41. 41. What are Generics? Code Templates
  42. 42. What's a Code Template? export class List<T> { add(item: T) {...} } ... var custs = new List<ICustomer>(); custs.add({ firstName: 'Ted', lastName: 'James'}); custs.add(205); //not valid List<T> can be used in many different ways
  43. 43. Generics in Action
  44. 44. The Future Today
  45. 45. The Future Today In 2016 decorators were an integral part of Angular via TypeScript …While still being a Proposal in the ES2016 spec Use "future" features today: async/await Many more... https://github.com/Microsoft/TypeScript/wiki/Roadmap
  46. 46. async/await demo
  47. 47. TypeScript Secret Weapon Review Types Tooling Interfaces Generics Future Today
  48. 48. "Angular technically doesn't require TypeScript kind of like technically a car doesn't require brakes.“ – Joe Eames
  49. 49. Thanks!
  50. 50. Need Onsite Training? Need Onsite training on Angular and TypeScript? Contact me at training@angular.ac!

×