Amitesh Kumar Amitesh

Decorator in JavaScript and Typescript

In JavaScript, we can apply decorators to class fields, methods, and the entire class. Therefore, we can’t use decorators on plain objects. They only work with classes.
Decorators are not a standard JavaScript feature. They are in stage 3 of the ECMA TC39 specification phase. To use JavaScript Decorators we need to set up a transpiler tool in our development environment, like Babel.
Decorator is concept and can be in form of function or start with @.

There are function decorator and class and it's member decorator. Fot indepenedent/global function we can decorate it by wrapping it inside another function but for class decorator we can use the @ symbol and typescript or bable library.

	export const config = {
	// ...
	reporters: [['allure', {
	outputDir: 'allure-results',
	disableWebdriverStepsReporting: true,
	disableWebdriverScreenshotsReporting: true,
	reportedEnvironmentVars: {
	'foo': 'Hello world!',
	foobar: 'Goodbye world',
	'Foo / Bar': process.env.foobar,

	Amiteshs-MacBook-Pro:fiserv amitesh$ ng new simpleNgxDatagrid --directory simple-ngx-datagrid
	CREATE simple-ngx-datagrid/README.md (1034 bytes)
	CREATE simple-ngx-datagrid/angular.json (3492 bytes)
	CREATE simple-ngx-datagrid/package.json (1323 bytes)
	CREATE simple-ngx-datagrid/tsconfig.json (384 bytes)
	CREATE simple-ngx-datagrid/tslint.json (2805 bytes)
	CREATE simple-ngx-datagrid/.editorconfig (245 bytes)
	CREATE simple-ngx-datagrid/.gitignore (503 bytes)
	CREATE simple-ngx-datagrid/src/environments/environment.prod.ts (51 bytes)
	CREATE simple-ngx-datagrid/src/environments/environment.ts (631 bytes)

	<!doctype html>

	<meta charset="utf-8">

	<meta name="author" content="Amsul - http://amsul.ca">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">


	We are following some standard to make our code same on all machine irrespective of different developers working on different machine, editors and with their different opinion for coding (smile).
	Help us to make it clean and uniform code base throughout the project.

	JS Standards
	Variable and Function naming
	All name should be CamelCase (start with small case) like `userPassword`
	Boolean flag should be start with `is`, `has` etc. It will give notion that it will be true/false or yes/no.
	For count or number variable good to use `no`, `count`
	Use getter and setters if you are setting some value or getting some value

	For a web project we can setup following environment to build our app.
	a) Development/Demo - This environment/stage will be get deployed on every changes pushed on `develop` branch. (Automated Build+deploy)
	b) Release/QA - This environment will be get deployed once we create a release branch in the repository. (Manually build + deploy from TC `run` button)
	c) Live - This environment will be deployed mannually from TeamCity by choosing the corrrect release branch to deploy on Live server. (Mannually)

	For setting up the `development` and `release` environemnt on TC is simillar except the pointing the branch name.
	We have followed few convension to give name to the applications on while setting up and it is pointed with the respective step.

	TC Setup

	Here is a small template to fill while reporting the bug. There is possibility few fields are already present with JIRA tickets like `attachements`. Its good to fill or use those fields.
	URL
	https://myawesomeapp.com?id=545924

	UserAgent
	Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

	Steps to reproduce the problem
	Open the website and web page on xyz browser
	Click on `save` button

	For more info about SCSS-Lint, please check this out -
	About SCSS-Lint
	SCSS-Lint default settings
	# Default application configuration that all configurations inherit from.

	linters:

	BorderZero:
	enabled: true
	convention: none

	{
	"bitwise": true,
	"camelcase": true,
	"curly": true,
	"eqeqeq": true,
	"eqnull": true,
	"forin": false,
	"freeze": false,
	"immed": true,
	"indent": 2,

	/**
	* Sort an array of object.
	*/
	var sample = [
	{ name: 'Ram', age: 21 },
	{ name: 'Shyam', age: 37 },
	{ name: 'Gyan', age: 45 }
	];

	sample.sort(function(a,b) {

Amitesh Kumar Amitesh

Decorator in JavaScript and Typescript

References