TypeScript: Angular's Secret Weapon
4 likes1,072 views
The document discusses TypeScript as a powerful superset of JavaScript that enhances scalability, modularity, and type safety in web development, making it particularly suitable for developers familiar with Java or C#. It highlights key features such as type annotations, classes, interfaces, and generics, while emphasizing TypeScript's ability to compile to plain JavaScript for compatibility across various environments. Additionally, the document notes TypeScript's integration into Angular and its significant tooling support for improved development efficiency.
![TypeScript Type Annotations
name: string;
age: number;
isEnabled: boolean;
pets: string[];
accessories: string | string[];](https://image.slidesharecdn.com/typescript-angularssecretweapon-170425222826/85/TypeScript-Angular-s-Secret-Weapon-19-320.jpg)
![Enum
enum Language {
TypeScript,
JavaScript,
C#
}
var lang = Language.C#;
var ts = Language[0]; // ts === “TypeScript”](https://image.slidesharecdn.com/typescript-angularssecretweapon-170425222826/85/TypeScript-Angular-s-Secret-Weapon-32-320.jpg)
TypeScript: Angular's Secret Weapon
- 4. • TypeScript ? • Weapons Types Classes Interfaces Enums • Tooling • Generics • Future Agenda
- 5. TypeScript?
- 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. 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. 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. “TypeScript? It’s like coding JavaScript but without the pain” - Someone on Hacker News
- 11. TypeScript
- 12. TypeScript • Open Source • https://github.com/Microsoft/TypeScript • Apache License 2.0
- 13. Who's No. 1 in open source? Microsoft! Source: https://octoverse.github.com/
- 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
- 16. How Does TypeScript Work? TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
- 17. Type Support
- 18. TypeScript Types Core types (optional but very helpful): • string • number • boolean • Date • Array • any Custom types
- 19. TypeScript Type Annotations name: string; age: number; isEnabled: boolean; pets: string[]; accessories: string | string[];
- 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. 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. “It feels just like writing JavaScript, but with a thin layer of type annotations that bring you the familiar advantages of static typing”
- 23. Types in Action
- 24. Classes
- 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
- 27. Interfaces
- 28. What is an Interface? A code contract
- 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
- 31. Enums
- 32. Enum enum Language { TypeScript, JavaScript, C# } var lang = Language.C#; var ts = Language[0]; // ts === “TypeScript”
- 33. Functions
- 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
- 36. Tooling Support
- 38. Key Tooling Support Features Code Help/ Intellisense Refactoring Peek/Go To Find References
- 40. Generics
- 41. What are Generics? Code Templates
- 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
- 44. The Future Today
- 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. async/await demo
- 47. TypeScript Secret Weapon Review Types Tooling Interfaces Generics Future Today
- 48. "Angular technically doesn't require TypeScript kind of like technically a car doesn't require brakes.“ – Joe Eames
- 49. Thanks!
- 50. Need Onsite Training? Need Onsite training on Angular and TypeScript? Contact me at [email protected]!