Download as PDF, PPTX
![TypeScript Type Annotations name: string; age: number; isEnabled: boolean; pets: string[]; accessories: string | string[];](https://image.slidesharecdn.com/typescript-angularssecretweapon-170607154401/75/TypeScript-Angular-s-Secret-Weapon-21-2048.jpg)
![Enum enum Language { TypeScript, JavaScript, C# } var lang = Language.C#; var ts = Language[0]; // ts === “TypeScript”](https://image.slidesharecdn.com/typescript-angularssecretweapon-170607154401/75/TypeScript-Angular-s-Secret-Weapon-34-2048.jpg)
Uploaded byLaurent Duveau
TypeScript: Angular's Secret Weapon
The document discusses TypeScript as a powerful superset of JavaScript designed to improve scalability and maintainability in web development. It highlights TypeScript's features such as strong typing, modularity, and tooling support that help developers avoid common pitfalls in JavaScript coding. Additionally, it touches on TypeScript's compatibility with existing libraries and frameworks like Angular, emphasizing its increasing adoption in the programming community.
TypeScript: Angular's Secret Weapon
- 1.
- 2.
- 3.
- 4.
- 5. • TypeScript ? •Weapons Types Classes Interfaces Enums • Tooling • Generics • Future Agenda
- 6.
- 7.
- 8. JavaScript The Good • It’severywhere • Huge amount of libraries • Flexible The Bad • Dynamic typing • Lack of modularity • Verbose patterns (IIFE) In short: JavaScript development scales badly.
- 10. Wish list ScalableHTML5 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. TypeScript! Scalable HTML5clientside development Modular code Easily learnable for Java or C# developers Non-invasive (existing libs, browser support) Long-term vision Clean Js output (exit strategy)
- 12. “TypeScript? It’s like codingJavaScript but without the pain” - Someone on Hacker News
- 13.
- 14. TypeScript • Open Source •https://github.com/Microsoft/TypeScript • Apache License 2.0
- 15. Who's No. 1in open source? Microsoft!
- 16. 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
- 17.
- 18. How Does TypeScriptWork? TypeScript file.ts JavaScript file.js TypeScript Compiler Output ES5/ES6/… compliant code “Transpiling”
- 19.
- 20. TypeScript Types Core types(optional but very helpful): • string • number • boolean • Date • Array • any Custom types
- 21. TypeScript Type Annotations name:string; age: number; isEnabled: boolean; pets: string[]; accessories: string | string[];
- 22. Why Use Types? @Component({...}) exportclass CalculatorComponent implements OnInit { total: number = 0; add(x: number, y: number) : number { return x + y; } } ngOnInit() { this.total = this.add('26', 20); } Oops!
- 23. Errors at compile-time! vara = 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!
- 24. “It feels justlike writing JavaScript, but with a thin layer of type annotations that bring you the familiar advantages of static typing”
- 25.
- 26.
- 27. 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
- 28.
- 29.
- 30. What is anInterface? A code contract
- 31. 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
- 32.
- 33.
- 34. Enum enum Language { TypeScript, JavaScript, C# } varlang = Language.C#; var ts = Language[0]; // ts === “TypeScript”
- 35.
- 36. 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
- 37.
- 38.
- 39.
- 40. Key Tooling SupportFeatures Code Help/ Intellisense Refactoring Peek/Go To Find References
- 41.
- 42.
- 43. What are Generics? CodeTemplates
- 44. What's a CodeTemplate? 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
- 45.
- 46.
- 47. The Future Today In2016 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
- 48.
- 49. TypeScript Secret WeaponReview Types Tooling Interfaces Generics Future Today
- 50. "Angular technically doesn't requireTypeScript kind of like technically a car doesn't require brakes.“ – Joe Eames
- 51.
- 52. Need Onsite Training? NeedOnsite training on Angular and TypeScript? Contact me at training@angular.ac!