Angular 2 : learn TypeScript already with Angular 1

TypeScript
Use it already yesterday
and be prepared for Angular 2

David Amend
David.Amend@it-amend.de
Conservative Bleeding edge
https://www.dab-bank.de/Konto-Kredit/DAB-Finanzmanager-Demo/
About me

... “ I even heard that they will
use Angular 2 in a galaxy far,
far away…”
http://www.ngparty.cz/ngBigParty-II/##what-to-expect

... “ 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

“ Use A2.x with TypeScript ”
Disclamer
no A2x code
in presentation

“
Learn the fundamentals of
TypeScript NOW !
” Disclamer
no A2x code
in presentation

Questions to audience
1. Who prefers typed languages to non typed?
2. Who uses TypeScript in project already?

Typing Evolution: Prefix
var sAmount = "100";
var nCalcConditions = function(sAmount, iRate){
return sAmount * nRate;
}

Typing Evolution: Jsdoc Closure Compiler
/**
* @interface
*/
function Shape() {};
Shape.prototype.draw = function() {};
/**
* @constructor
* @implements {Shape}
*/
function Square() {};
Square.prototype.draw = function() {
};

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

TypeScript
What you should know ?

TypeScript: What you should know ?
d.ts
Interfaces
1.

TypeScript: What you should know ?
d.ts
Interfaces
Decorators
1. 2.

Angular 2 : learn TypeScript already with Angular 1

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

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

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/

There cannot be reasons
NOT to use TypeScript!

1. Starting situation
var loanLimit = “100”;
2. Extend build process
.pipe(tsc(“*.js”));
3. Congratz! You are using TypeScript !

IDE Support by separate .d.ts files

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 !

export interface IDeleteDomesticTemplateRequestDTO {
cifId: string;
templateName: string;
}
export interface IDeleteDomesticTemplateResponseDTO {
errorCode: string;
}
export enum IQuoteStatusEnum {
CUSTOMER_DATA_CONFIRMED = <string>"CUSTOMER_DATA_CONFIRMED",
}

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 !

Anders Hejlsberg
C# Delphi TurboPascal TypeScript
C#

Why to use Types ?
1. Refactoring support in IDE
2. Exploration of code
3. Explain code to foreigners ( and myself)

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

Demotime: Future Bank
TypeScript, Angular Material, A1x, ...

Angular 2 : learn TypeScript already with Angular 1

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Angular 2 : learn TypeScript already with Angular 1 (20)

More from David Amend (6)

Recently uploaded (20)

Angular 2 : learn TypeScript already with Angular 1