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

330 views

Published on

Technical presentation given by Laurent Duveau at Prairie Dev Con in Winnipeg on June 07th, 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
  • Be the first to comment

TypeScript: Angular's Secret Weapon

  1. 1. TypeScript Angular's Secret Weapon
  2. 2. TypeScript Angular's Secret Weapon Laurent Duveau
  3. 3. TypeScript Angular's Secret Weapon Laurent Duveau
  4. 4. Laurent Duveau @LaurentDuveau http://angular.ac/blog Microsoft MVP and RD
  5. 5. • TypeScript ? • Weapons Types Classes Interfaces Enums • Tooling • Generics • Future Agenda
  6. 6. TypeScript?
  7. 7. Wait... Why TypeScript?
  8. 8. 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.
  9. 9. 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)
  10. 10. 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)
  11. 11. “TypeScript? It’s like coding JavaScript but without the pain” - Someone on Hacker News
  12. 12. TypeScript
  13. 13. TypeScript • Open Source • https://github.com/Microsoft/TypeScript • Apache License 2.0
  14. 14. Who's No. 1 in open source? Microsoft!
  15. 15. 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
  16. 16. TypeScript ES2016 ES2015 ES5
  17. 17. How Does TypeScript Work? TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
  18. 18. Type Support
  19. 19. TypeScript Types Core types (optional but very helpful): • string • number • boolean • Date • Array • any Custom types
  20. 20. TypeScript Type Annotations name: string; age: number; isEnabled: boolean; pets: string[]; accessories: string | string[];
  21. 21. 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!
  22. 22. 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!
  23. 23. “It feels just like writing JavaScript, but with a thin layer of type annotations that bring you the familiar advantages of static typing”
  24. 24. Types in Action
  25. 25. Classes
  26. 26. 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
  27. 27. Classes in Action
  28. 28. Interfaces
  29. 29. What is an Interface? A code contract
  30. 30. 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
  31. 31. Interfaces in Action
  32. 32. Enums
  33. 33. Enum enum Language { TypeScript, JavaScript, C# } var lang = Language.C#; var ts = Language[0]; // ts === “TypeScript”
  34. 34. Functions
  35. 35. 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
  36. 36. Functions in Action
  37. 37. Tooling Support
  38. 38. Tooling Support Examples
  39. 39. Key Tooling Support Features Code Help/ Intellisense Refactoring Peek/Go To Find References
  40. 40. Tooling in Action
  41. 41. Generics
  42. 42. What are Generics? Code Templates
  43. 43. 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
  44. 44. Generics in Action
  45. 45. The Future Today
  46. 46. 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
  47. 47. async/await demo
  48. 48. TypeScript Secret Weapon Review Types Tooling Interfaces Generics Future Today
  49. 49. "Angular technically doesn't require TypeScript kind of like technically a car doesn't require brakes.“ – Joe Eames
  50. 50. Thanks!
  51. 51. Need Onsite Training? Need Onsite training on Angular and TypeScript? Contact me at training@angular.ac!

×