Decorators in TypescriptVancouver Angular JS Meetup Andrew Eisenberg, PhD

Welcome to Costa Rica

What you will learn

What you will learn

Know when to use a decorator

Know how Angular 2 uses decorators

Be able to create your own decorator

DecoratorsclassConnector{@logconnect(user:User){returnuser.login();}}

classUser{@secureprivatepassword:string;@notNullprivatename:string;...login():Q.Promise<any>{return...;}}

Decorators are not annotations

Decorators are metadata AND semantics

Java annotations are ONLY metadata

Annotation processing happens separatelyI like annotations better since behaviour is

independent from metadata. Separation of Concerns

Decorators are not annotations

Decorators are metadata AND semantics

Java annotations are ONLY metadata

Annotation processing happens separatelyI like annotations better since behaviour is

independent from metadata. Separation of Concerns

Java Devs, don’t get confused!

When should I use decorators?

They provide metadata

They specify extra behaviour

They implement cross-cutting concerns

`

http://leechae0.blogspot.ca/2013/05/aspect-oriented-programmingaop.html

Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition

Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition

Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable

Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition

Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable

CrossCutting@inject@component@view@priority@service@filter@entity

@private@internal@restricted@persisted@secure

Metadata@nonNull@nonEmpty@nullable@log@deprecated@notYetImplemented@readonly@precondition

Additionalbehaviour@toString@uniqueId@classifier@memoize@sortable

CrossCutting@inject@component@view@priority@service@filter@entity

@private@internal@restricted@persisted@secure

}Angular 2.0 Annotations

Angular 2.0 decorators

Architectural directives

@Component

@Directive

@Injectible

@Pipe

@RouteConfig

@CanActivate

Architectural directives

@Component

@Directive

@Injectible

@Pipe

@RouteConfig

@CanActivate

@Component

@Component({selector:'greet',template:'Hello{{name}}!',directives:[CustomDirective]})classGreet{name:string='World';}

@RouteConfig

@Component(…)@RouteConfig([{path:,name:,component:}{…}

])classApp{…}

By Matthew.landry at English Wikipedia, CC BY-SA 2.5, https://commons.wikimedia.org/w/index.php?curid=4398466

Make your own decorator

Class decorator

functionnuthin<TextendsFunction>(target:T):T{

//createconstructorletnewConstructor:T=...returnnewConstructor;}

Class decorator

functionnuthin<TextendsFunction>(target:T):T{

//createconstructorletnewConstructor:T=...returnnewConstructor;}

Original constructor

Class decorator

functionnuthin<TextendsFunction>(target:T):T{

//createconstructorletnewConstructor:T=...returnnewConstructor;}

Original constructor

Here be magic

Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor

value:function(...args:any[]){...}};};}

Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor

value:function(...args:any[]){...}};};}

Descriptor parameters

Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor

value:function(...args:any[]){...}};};}

Descriptor parameters

Function parameters

Method decoratorfunctionnuthin(...args[]){return(target:Object,//instancekey:string,//methodnamedescriptor:any)=>{//propdescriptorreturn{//newpropdescriptor

value:function(...args:any[]){...}};};}

Descriptor parameters

Function parameters

Here be magic

ResourcesAngular2 Decorators:

https://angular.io/docs/ts/latest/guide/cheatsheet.html

Typescript Decorators:

http://blog.wolksoftware.com/decorators-reflection-javascript-typescript

Code

Angular2 Starter:

https://github.com/angular-class/angular2-webpack-starter

TypeScript Decorators:

https://github.com/aeisenberg/typescript-decorators

Any questions?