most important techniques & plugins for typescript from real projects experiences

1. TypeScript
Use it already yesterday
and be prepared for Angular 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. ... “ 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

20. 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/

21. There cannot be reasons
NOT to use TypeScript!

22. Questions &
Discussion

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