TypeScriptUse it already yesterdayand 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

Disclamerno A2x code in presentation

“ Use A2.x with TypeScript ”

Disclamerno 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?

The Type in TypeScript

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

TypeScriptWhat you should know ?

TypeScript: What you should know ?

d.tsInterfaces

1.

TypeScript: What you should know ?

d.tsInterfaces Decorators

1. 2.

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

TypeScript: What you should know ?

d.tsInterfaces Decorators

1. 2.

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

TypeScript

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!

Questions & Discussion

Code Demo

1. Starting situationvar 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.tsinterface ILoanModel {

id : number, ...}

LoansController.tsvar 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 !

TypeScript is widely used

Anders Hejlsberg

C# Delphi TurboPascal TypeScript

C#

Why to use Types ?

1. Refactoring support in IDE2. Exploration of code3. Explain code to foreigners ( and myself)

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

Demotime: Future BankTypeScript, Angular Material, A1x, ...