SlideShare a Scribd company logo
1 of 32
Download to read offline
Decorators in Typescript
Vancouver 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
Decorators
class	Connector	{	
		@log	
		connect(user:	User)	{	
				return	user.login();	
		}	
}
class	User	{	
		@secure	
		private	password:	string;	
		@notNull	
		private	name:	string;	
		...	
		login():	Q.Promise<any>	{	
				return	...;	
		}	
}
Decorators are not
annotations
Decorators are metadata AND semantics
Java annotations are ONLY metadata
Annotation processing happens separately
I 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 separately
I like annotations better since behaviour is
independent from metadata.
Separation of Concerns
Java Devs, don’t get confused!
Typescript decorators
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
Typescript decorators
Metadata	
@nonNull
@nonEmpty
@nullable
@log
@deprecated
@notYetImplemented
@readonly
@precondition
Metadata	
@nonNull
@nonEmpty
@nullable
@log
@deprecated
@notYetImplemented
@readonly
@precondition
Additional	behaviour	
@toString
@uniqueId
@classifier
@memoize
@sortable
Metadata	
@nonNull
@nonEmpty
@nullable
@log
@deprecated
@notYetImplemented
@readonly
@precondition
Additional	behaviour	
@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
Additional	behaviour	
@toString
@uniqueId
@classifier
@memoize
@sortable
CrossCutting	
@inject
@component
@view
@priority
@service
@filter
@entity
@private
@internal
@restricted
@persisted
@secure
}Angular 2.0
Annotations
Typescript decorators
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]	
})	
class	Greet	{	
		name:	string	=	'World';	
}
@RouteConfig
@Component(…)	
@RouteConfig([	
		{path:	,	name:	,	component:	}	
{…}	
])	
class	App	{	
	…	
}
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
function	nuthin<T	extends	Function>	
(target:	T):	T	{	
				//	create	constructor	
				let	newConstructor:	T	=	...	
				return	newConstructor;	
}
Class decorator
function	nuthin<T	extends	Function>	
(target:	T):	T	{	
				//	create	constructor	
				let	newConstructor:	T	=	...	
				return	newConstructor;	
}
Original constructor
Class decorator
function	nuthin<T	extends	Function>	
(target:	T):	T	{	
				//	create	constructor	
				let	newConstructor:	T	=	...	
				return	newConstructor;	
}
Original constructor
Here be magic
Method decorator
function	nuthin(...args[])	{	
		return	(target:	Object,	//	instance	
						key:	string,	//	method	name	
						descriptor:	any)	=>	{		//	prop	descriptor	
		return	{		//	new	prop	descriptor	
						value:	function(...args:	any[])	{	...	}	
				};	
		};	
}
Method decorator
function	nuthin(...args[])	{	
		return	(target:	Object,	//	instance	
						key:	string,	//	method	name	
						descriptor:	any)	=>	{		//	prop	descriptor	
		return	{		//	new	prop	descriptor	
						value:	function(...args:	any[])	{	...	}	
				};	
		};	
}
Descriptor parameters
Method decorator
function	nuthin(...args[])	{	
		return	(target:	Object,	//	instance	
						key:	string,	//	method	name	
						descriptor:	any)	=>	{		//	prop	descriptor	
		return	{		//	new	prop	descriptor	
						value:	function(...args:	any[])	{	...	}	
				};	
		};	
}
Descriptor parameters
Function parameters
Method decorator
function	nuthin(...args[])	{	
		return	(target:	Object,	//	instance	
						key:	string,	//	method	name	
						descriptor:	any)	=>	{		//	prop	descriptor	
		return	{		//	new	prop	descriptor	
						value:	function(...args:	any[])	{	...	}	
				};	
		};	
}
Descriptor parameters
Function parameters
Here be magic
Resources
Angular2 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?

More Related Content

Similar to Typescript decorators

SenchaCon 2015 - Visualizing Class Dependencies
SenchaCon 2015 - Visualizing Class DependenciesSenchaCon 2015 - Visualizing Class Dependencies
SenchaCon 2015 - Visualizing Class Dependenciesstan229
 
Computer Science And Engineering, Amity University, Noida...
Computer Science And Engineering, Amity University, Noida...Computer Science And Engineering, Amity University, Noida...
Computer Science And Engineering, Amity University, Noida...Asia Grover
 
Java interview questions and answers
Java interview questions and answersJava interview questions and answers
Java interview questions and answersKrishnaov
 
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design PatternsJavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design PatternsJavaScripters Community
 
Poject documentation deepak
Poject documentation deepakPoject documentation deepak
Poject documentation deepakchetankane
 
A seminar report on core java
A  seminar report on core javaA  seminar report on core java
A seminar report on core javaAisha Siddiqui
 
When Enterprise Java Micro Profile meets Angular
When Enterprise Java Micro Profile meets AngularWhen Enterprise Java Micro Profile meets Angular
When Enterprise Java Micro Profile meets AngularAntonio Goncalves
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript Corley S.r.l.
 
Introduction to Core Java Programming
Introduction to Core Java ProgrammingIntroduction to Core Java Programming
Introduction to Core Java ProgrammingRaveendra R
 
How to not shoot yourself in the foot when working with serialization
How to not shoot yourself in the foot when working with serializationHow to not shoot yourself in the foot when working with serialization
How to not shoot yourself in the foot when working with serializationPVS-Studio
 

Similar to Typescript decorators (20)

Python Metaclass and How Django uses them: Foss 2010
Python Metaclass and How Django uses them: Foss 2010Python Metaclass and How Django uses them: Foss 2010
Python Metaclass and How Django uses them: Foss 2010
 
Java Annotations
Java AnnotationsJava Annotations
Java Annotations
 
Java Custom Annotations- Part1
Java Custom Annotations- Part1Java Custom Annotations- Part1
Java Custom Annotations- Part1
 
SenchaCon 2015 - Visualizing Class Dependencies
SenchaCon 2015 - Visualizing Class DependenciesSenchaCon 2015 - Visualizing Class Dependencies
SenchaCon 2015 - Visualizing Class Dependencies
 
Java basic concept
Java basic conceptJava basic concept
Java basic concept
 
Computer Science And Engineering, Amity University, Noida...
Computer Science And Engineering, Amity University, Noida...Computer Science And Engineering, Amity University, Noida...
Computer Science And Engineering, Amity University, Noida...
 
Java interview questions and answers
Java interview questions and answersJava interview questions and answers
Java interview questions and answers
 
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design PatternsJavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns
JavaScripters Event Sep 17, 2016 · 2:00 PM: Scalable Javascript Design Patterns
 
Poject documentation deepak
Poject documentation deepakPoject documentation deepak
Poject documentation deepak
 
Java programing brochure
Java programing  brochureJava programing  brochure
Java programing brochure
 
A seminar report on core java
A  seminar report on core javaA  seminar report on core java
A seminar report on core java
 
70 536
70 53670 536
70 536
 
When Enterprise Java Micro Profile meets Angular
When Enterprise Java Micro Profile meets AngularWhen Enterprise Java Micro Profile meets Angular
When Enterprise Java Micro Profile meets Angular
 
Java quick reference
Java quick referenceJava quick reference
Java quick reference
 
Java unit 7
Java unit 7Java unit 7
Java unit 7
 
The advantage of developing with TypeScript
The advantage of developing with TypeScript The advantage of developing with TypeScript
The advantage of developing with TypeScript
 
AngularConf2015
AngularConf2015AngularConf2015
AngularConf2015
 
Introduction to Core Java Programming
Introduction to Core Java ProgrammingIntroduction to Core Java Programming
Introduction to Core Java Programming
 
How to not shoot yourself in the foot when working with serialization
How to not shoot yourself in the foot when working with serializationHow to not shoot yourself in the foot when working with serialization
How to not shoot yourself in the foot when working with serialization
 
Java basic
Java basicJava basic
Java basic
 

Recently uploaded

Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesSoftwareMill
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsJaydeep Chhasatia
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageDista
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.Sharon Liu
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 

Recently uploaded (20)

Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Growing Oxen: channel operators and retries
Growing Oxen: channel operators and retriesGrowing Oxen: channel operators and retries
Growing Oxen: channel operators and retries
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software TeamsYour Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
Your Vision, Our Expertise: TECUNIQUE's Tailored Software Teams
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales CoverageSales Territory Management: A Definitive Guide to Expand Sales Coverage
Sales Territory Management: A Definitive Guide to Expand Sales Coverage
 
Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
20240319 Car Simulator Plan.pptx . Plan for a JavaScript Car Driving Simulator.
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 

Typescript decorators