Angular 2 : learn TypeScript already with Angular 1
1 like•549 views
TypeScript can be used to add types to JavaScript for better integration with IDEs and refactoring support. It allows defining interfaces to support modular projects and combining client and server models. Key things to know about TypeScript include interfaces, decorators, module support, and ES6 features. There are many benefits to using TypeScript like refactoring support, code exploration, and self-documentation.
Angular 2 : learn TypeScript already with Angular 1
- 1. TypeScript Use it already yesterday and be prepared for Angular 2
- 2. David Amend [email protected] Conservative Bleeding edge https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/ About me
- 3. ... “ I even heard that they will use Angular 2 in a galaxy far, far away…” http://www.ngparty.cz/ngBigParty-II/##what-to-expect
- 4. ... “ I even heard that they will use Angular 2 in a galaxy far, far away…” http://www.ngparty.cz/ngBigParty-II/##what-to-expect Disclamer no A2x code in presentation
- 5. “ Use A2.x with TypeScript ” Disclamer no A2x code in presentation
- 6. “ Learn the fundamentals of TypeScript NOW ! ” Disclamer no A2x code in presentation
- 7. Questions to audience 1. Who prefers typed languages to non typed? 2. Who uses TypeScript in project already?
- 8. The Type in TypeScript
- 9. Typing Evolution: Prefix var sAmount = "100"; var nCalcConditions = function(sAmount, iRate){ return sAmount * nRate; }
- 10. Typing Evolution: Jsdoc Closure Compiler /** * @interface */ function Shape() {}; Shape.prototype.draw = function() {}; /** * @constructor * @implements {Shape} */ function Square() {}; Square.prototype.draw = function() { };
- 11. Typing Evolution: GWT, Dart Button myButton = new Button("x"); myButton.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { ///... } }); flexTable.setWidget(row, 3, myButton); VM JS Problem: Hard to combine GWT: Strong Java IDE support
- 12. TypeScript What you should know ?
- 13. TypeScript: What you should know ? d.ts Interfaces 1.
- 14. TypeScript: What you should know ? d.ts Interfaces Decorators 1. 2.
- 16. Module B Module B Interfaces to support modular projects, combine client & server models Module A Module B *.d.ts check interfaces → by compile time *.ts Async loaded → at runtime define interface use interface *.d.ts REST-Services *.ts
- 17. TypeScript: What you should know ? d.ts Interfaces Decorators 1. 2.
- 18. So much to explore: Decorators, ... import { Component } from 'ng-forward'; @Component({ selector: 'nested', template: '<h3>Nested</h3>' }) @DebugLog class Nested{ } HTML-Type BindingIDE-Refactoring Support Literal Types Aspect Oriented Programming
- 19. TypeScript
- 21. There cannot be reasons NOT to use TypeScript!
- 23. Code Demo
- 24. 1. Starting situation var loanLimit = “100”; 2. Extend build process .pipe(tsc(“*.js”)); 3. Congratz! You are using TypeScript !
- 25. IDE Support by separate .d.ts files
- 26. Smooth way to start using TypeScript 4. var loanLimit : string = “100”; ILoans-Service.d.ts interface ILoanModel { id : number, ... } LoansController.ts var loanmodel : ILoanModel = { … } No generation of code !
- 27. export interface IDeleteDomesticTemplateRequestDTO { cifId: string; templateName: string; } export interface IDeleteDomesticTemplateResponseDTO { errorCode: string; } export enum IQuoteStatusEnum { CUSTOMER_DATA_CONFIRMED = <string>"CUSTOMER_DATA_CONFIRMED", }
- 28. ES-6, module support, =>, decorators, html type support, …, tslint, sourcemaps, … namespace danubeCorePortal { class DanubeCorePortalController { private sideNavigationItems; constructor(private $mdSidenav : angular.material.MDSidenavObject) { } @Log public toggleSubnavigation ($event) { this.$mdSidenav( "left").toggle(); } } } Generation of code !
- 29. TypeScript is widely used
- 30. Anders Hejlsberg C# Delphi TurboPascal TypeScript C#
- 34. Why to use Types ? 1. Refactoring support in IDE 2. Exploration of code 3. Explain code to foreigners ( and myself)
- 35. ES2016 ES7 tsc -- experimentalDecorato rs main.ts https://www.sitepen. com/blog/2015/10/20/typescript- decorators/ annotate and modify classes and properties at design time. → Interface
- 36. Demotime: Future Bank TypeScript, Angular Material, A1x, ...