angular 2 : learn typescript already with angular 1
TRANSCRIPT
![Page 1: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/1.jpg)
TypeScriptUse it already yesterdayand be prepared for Angular 2
![Page 2: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/2.jpg)
David Amend
Conservative Bleeding edge
https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
About me
![Page 3: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/3.jpg)
... “ I even heard that they will use Angular 2 in a galaxy far, far away…”
http://www.ngparty.cz/ngBigParty-II/##what-to-expect
![Page 4: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/4.jpg)
... “ I even heard that they will use Angular 2 in a galaxy far, far away…”
http://www.ngparty.cz/ngBigParty-II/##what-to-expect
Disclamerno A2x code in presentation
![Page 5: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/5.jpg)
“ Use A2.x with TypeScript ”
Disclamerno A2x code in presentation
![Page 6: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/6.jpg)
“Learn the fundamentals of TypeScript NOW !” Disclamer
no A2x code in presentation
![Page 7: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/7.jpg)
Questions to audience
1. Who prefers typed languages to non typed?
2. Who uses TypeScript in project already?
![Page 8: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/8.jpg)
The Type in TypeScript
![Page 9: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/9.jpg)
Typing Evolution: Prefix
var sAmount = "100";
var nCalcConditions = function(sAmount, iRate){ return sAmount * nRate;}
![Page 10: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/10.jpg)
Typing Evolution: Jsdoc Closure Compiler/*** @interface*/function Shape() {};Shape.prototype.draw = function() {};
/*** @constructor* @implements {Shape}*/function Square() {};Square.prototype.draw = function() {};
![Page 11: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/11.jpg)
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
![Page 12: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/12.jpg)
TypeScriptWhat you should know ?
![Page 13: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/13.jpg)
TypeScript: What you should know ?
d.tsInterfaces
1.
![Page 14: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/14.jpg)
TypeScript: What you should know ?
d.tsInterfaces Decorators
1. 2.
![Page 15: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/15.jpg)
![Page 16: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/16.jpg)
Module BModule 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
![Page 17: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/17.jpg)
TypeScript: What you should know ?
d.tsInterfaces Decorators
1. 2.
![Page 18: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/18.jpg)
So much to explore: Decorators, ...
import { Component } from 'ng-forward';
@Component({ selector: 'nested', template: '<h3>Nested</h3>'})@DebugLogclass Nested{ }
HTML-Type BindingIDE-Refactoring Support Literal Types
Aspect Oriented Programming
![Page 19: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/19.jpg)
TypeScript
![Page 20: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/20.jpg)
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/
![Page 21: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/21.jpg)
There cannot be reasons NOT to use TypeScript!
![Page 22: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/22.jpg)
Questions & Discussion
![Page 23: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/23.jpg)
Code Demo
![Page 24: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/24.jpg)
1. Starting situationvar loanLimit = “100”;
2. Extend build process.pipe(tsc(“*.js”));
3. Congratz! You are using TypeScript !
![Page 25: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/25.jpg)
IDE Support by separate .d.ts files
![Page 26: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/26.jpg)
Smooth way to start using TypeScript
4. var loanLimit : string = “100”;
ILoans-Service.d.tsinterface ILoanModel {
id : number, ...}
LoansController.tsvar loanmodel : ILoanModel = { … }
No generation of code !
![Page 27: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/27.jpg)
export interface IDeleteDomesticTemplateRequestDTO { cifId: string; templateName: string;}
export interface IDeleteDomesticTemplateResponseDTO { errorCode: string;}
export enum IQuoteStatusEnum { CUSTOMER_DATA_CONFIRMED = <string>"CUSTOMER_DATA_CONFIRMED",}
![Page 28: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/28.jpg)
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 !
![Page 29: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/29.jpg)
TypeScript is widely used
![Page 30: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/30.jpg)
Anders Hejlsberg
C# Delphi TurboPascal TypeScript
C#
![Page 31: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/31.jpg)
![Page 32: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/32.jpg)
![Page 33: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/33.jpg)
![Page 34: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/34.jpg)
Why to use Types ?
1. Refactoring support in IDE2. Exploration of code3. Explain code to foreigners ( and myself)
![Page 35: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/35.jpg)
ES2016 ES7
tsc --experimentalDecorators main.ts
https://www.sitepen.com/blog/2015/10/20/typescript-decorators/
annotate and modify classes and properties at design time. → Interface
![Page 36: Angular 2 : learn TypeScript already with Angular 1](https://reader034.vdocuments.mx/reader034/viewer/2022042611/58cf6dc71a28abe6688b4b29/html5/thumbnails/36.jpg)
Demotime: Future BankTypeScript, Angular Material, A1x, ...