Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Angular 2 : learn TypeScript already with Angular 1

most important techniques & plugins for typescript from real projects experiences

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Angular 2 : learn TypeScript already with Angular 1

  1. 1. TypeScript Use it already yesterday and be prepared for Angular 2
  2. 2. David Amend David.Amend@it-amend.de Conservative Bleeding edge https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/ About me
  3. 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. 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. 5. “ Use A2.x with TypeScript ” Disclamer no A2x code in presentation
  6. 6. “ Learn the fundamentals of TypeScript NOW ! ” Disclamer no A2x code in presentation
  7. 7. Questions to audience 1. Who prefers typed languages to non typed? 2. Who uses TypeScript in project already?
  8. 8. The Type in TypeScript
  9. 9. Typing Evolution: Prefix var sAmount = "100"; var nCalcConditions = function(sAmount, iRate){ return sAmount * nRate; }
  10. 10. Typing Evolution: Jsdoc Closure Compiler /** * @interface */ function Shape() {}; Shape.prototype.draw = function() {}; /** * @constructor * @implements {Shape} */ function Square() {}; Square.prototype.draw = function() { };
  11. 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. 12. TypeScript What you should know ?
  13. 13. TypeScript: What you should know ? d.ts Interfaces 1.
  14. 14. TypeScript: What you should know ? d.ts Interfaces Decorators 1. 2.
  15. 15. 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
  16. 16. TypeScript: What you should know ? d.ts Interfaces Decorators 1. 2.
  17. 17. 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
  18. 18. TypeScript
  19. 19. Cool links https://github.com/ngUpgraders/ng-forward https://github.com/ngParty/ng-metadata https://github.com/raphaeljolivet/java2typescript https://github.com/wycats/javascript-decorators http://blog.wolksoftware.com/decorators-metadata-reflection-in-typescript-from-novice-to-expert- part-3 https://basarat.gitbooks.io/
  20. 20. There cannot be reasons NOT to use TypeScript!
  21. 21. Questions & Discussion
  22. 22. Code Demo
  23. 23. 1. Starting situation var loanLimit = “100”; 2. Extend build process .pipe(tsc(“*.js”)); 3. Congratz! You are using TypeScript !
  24. 24. IDE Support by separate .d.ts files
  25. 25. 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 !
  26. 26. export interface IDeleteDomesticTemplateRequestDTO { cifId: string; templateName: string; } export interface IDeleteDomesticTemplateResponseDTO { errorCode: string; } export enum IQuoteStatusEnum { CUSTOMER_DATA_CONFIRMED = <string>"CUSTOMER_DATA_CONFIRMED", }
  27. 27. 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 !
  28. 28. TypeScript is widely used
  29. 29. Anders Hejlsberg C# Delphi TurboPascal TypeScript C#
  30. 30. Why to use Types ? 1. Refactoring support in IDE 2. Exploration of code 3. Explain code to foreigners ( and myself)
  31. 31. 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
  32. 32. Demotime: Future Bank TypeScript, Angular Material, A1x, ...

×