Download as PDF, PPTX
Uploaded byDavid Amend
Angular 2 : learn TypeScript already with Angular 1
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 alreadyyesterday and be prepared for Angular 2
- 2. David Amend David.Amend@it-amend.de Conservative Bleedingedge https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/ About me
- 3. ... “ Ieven heard that they will use Angular 2 in a galaxy far, far away…” http://www.ngparty.cz/ngBigParty-II/##what-to-expect
- 4. ... “ Ieven 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.xwith TypeScript ” Disclamer no A2x code in presentation
- 6. “ Learn the fundamentalsof 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 inTypeScript
- 9. Typing Evolution: Prefix varsAmount = "100"; var nCalcConditions = function(sAmount, iRate){ return sAmount * nRate; }
- 10. Typing Evolution: JsdocClosure 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.
- 13. TypeScript: What youshould know ? d.ts Interfaces 1.
- 14. TypeScript: What youshould know ? d.ts Interfaces Decorators 1. 2.
- 16. Module B Module B Interfacesto 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 youshould know ? d.ts Interfaces Decorators 1. 2.
- 18. So much toexplore: 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.
- 20.
- 21. There cannot bereasons NOT to use TypeScript!
- 22.
- 23.
- 24. 1. Starting situation varloanLimit = “100”; 2. Extend build process .pipe(tsc(“*.js”)); 3. Congratz! You are using TypeScript !
- 25. IDE Support byseparate .d.ts files
- 26. Smooth way tostart 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.
- 30. Anders Hejlsberg C# DelphiTurboPascal TypeScript C#
- 34. Why to useTypes ? 1. Refactoring support in IDE 2. Exploration of code 3. Explain code to foreigners ( and myself)
- 35. ES2016 ES7 tsc -- experimentalDecorato rsmain.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, ...