在咱们深刻了解 Angular 2 中 @NgModule、@Component、@Injectable 等常见的装饰器以前，咱们要先了解 TypeScript 中的装饰器。装饰器是一个很是酷的特性，最先出如今 Google 的 AtScript 中，它出现的目的是为了让开发者，开发出更容易维护、更容易理解的 Angular 代码。使人兴奋的是，在2015年 Angular 团队跟 MicroSoft 的 TypeScript 团队通过数月的的交流，最终决定采用 TypeScript 来重写 Angular 2 项目 。app
它是一个表达式函数
该表达式被执行后，返回一个函数ui
函数的入参分别为 targe、name 和 descriptorthis
执行该函数后，可能返回 descriptor 对象，用于配置 target 对象 prototype
类装饰器 (Class decorators)code
属性装饰器 (Property decorators)对象
方法装饰器 (Method decorators)索引
参数装饰器 (Parameter decorators)ip
类装饰器声明：开发
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void
类装饰器顾名思义，就是用来装饰类的。它接收一个参数：
target: TFunction - 被装饰的类
看完第一眼后，是否是感受都很差了。没事，咱们立刻来个例子：
function Greeter(target: Function): void {
target.prototype.greet = function (): void {
console.log('Hello!');
}
}
@Greeter
class Greeting {
constructor() {
// 内部实现
}
}
let myGreeting = new Greeting();
myGreeting.greet(); // console output: 'Hello!';
上面的例子中，咱们定义了 Greeter 类装饰器，同时咱们使用了 @Greeter 新的语法，来使用装饰器。
(备注：读者能够直接复制上面的代码，在 TypeScript Playground 中运行查看结果)。
有的读者可能想问，例子中老是输出 Hello! ，能自定义输出的问候语么 ？这个问题很好，答案是能够的。具体实现以下：
function Greeter(greeting: string) {
return function(target: Function) {
target.prototype.greet = function(): void {
console.log(greeting);
}
}
}
@Greeter('您好')
class Greeting {
constructor() {
// 内部实现
}
}
let myGreeting = new Greeting();
myGreeting.greet(); // console output: '您好!';
属性装饰器声明：
declare type PropertyDecorator = (target:Object, propertyKey: string | symbol ) => void;
属性装饰器顾名思义，用来装饰类的属性。它接收两个参数：
target: Object - 被装饰的类
propertyKey:string | symbol - 被装饰类的属性名
趁热打铁，立刻来个例子热热身：
function LogChanges(target: Object, key: string) {
var propertyValue: string = this[key];
if(delete this[key]) {
Object.defineProperty(target, key, {
get: function () {
return propertyValue;
},
set: function(newValue) {
propertyValue = newValue;
console.log(`${key} is now ${propertyValue}`);
}
});
}
}
class Fruit {
@LogChanges
name: string;
}
let fruit = new Fruit();
fruit.name = 'apple'; // console output: 'name is now apple'
fruit.name = 'banana'; // console output: 'name is now banana'
那么问题来了，若是用户想在属性变化的时候，自动刷新页面，而不是简单地在控制台输出消息，那要怎么办？咱们能不能参照类装饰器自定义问候语的方式，来实现监测属性变化的功能。具体实现以下：
function LogChanges(callbackObject: any) {
return function(target: Object, key: string): void {
var propertyValue: string = this[key];
if(delete this[key]) {
Object.defineProperty(target, key, {
get: function () {
return propertyValue;
},
set: function(newValue) {
propertyValue = newValue;
callbackObject.onchange.call(this, propertyValue);
}
});
}
}
}
class Fruit {
@LogChanges({
onchange: function(newValue: string): void {
console.log(`The fruit is ${newValue} now`);
}
})
name: string;
}
let fruit = new Fruit();
fruit.name = 'apple'; // console output: 'The fruit is apple now'
fruit.name = 'banana'; // console output: 'The fruit is banana now'
方法装饰器声明：
declare type MethodDecorator = <T>(target:Object, propertyKey: string | symbol, descriptor: TypePropertyDescript<T>) => TypedPropertyDescriptor<T> | void;
方法装饰器顾名思义，用来装饰类的属性。它接收三个参数：
target: Object - 被装饰的类
propertyKey: string | symbol - 方法名
descriptor: TypePropertyDescript - 属性描述符
废话很少说，直接上例子：
function LogOutput(tarage: Function, key: string, descriptor: any) {
var originalMethod = descriptor.value;
var newMethod = function(...args: any[]): any {
var result: any = originalMethod.apply(this, args);
if(!this.loggedOutput) {
this.loggedOutput = new Array<any>();
}
this.loggedOutput.push({
method: key,
parameters: args,
output: result,
timestamp: new Date()
});
return result;
};
descriptor.value = newMethod;
}
class Calculator {
@LogOutput
double (num: number): number {
return num * 2;
}
}
let calc = new Calculator();
calc.double(11);
// console ouput: [{method: "double", output: 22, ...}]
console.log(calc.loggedOutput);
最后咱们来看一下参数装饰器：
参数装饰器声明：
declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number ) => void
参数装饰器顾名思义，是用来装饰函数参数，它接收三个参数：
target: Object - 被装饰的类
propertyKey: string | symbol - 方法名
parameterIndex: number - 方法中参数的索引值
function Log(target: Function, key: string, parameterIndex: number) {
var functionLogged = key || target.prototype.constructor.name;
console.log(`The parameter in position ${parameterIndex} at ${functionLogged} has
been decorated`);
}
class Greeter {
greeting: string;
constructor(@Log phrase: string) {
this.greeting = phrase;
}
}
// console output: The parameter in position 0 at Greeter has
// been decorated
1.Object.defineProperty() 方法有什么用 ？
Object.defineProperty 用于在一个对象上定义一个新的属性或者修改一个已存在的属性，并返回这个对象。 方法的签名：Object.defineProperty(obj, prop, descriptor) ，参数说明以下：
obj 须要定义的属性对象
prop 需被定义或修改的属性名
descriptor 需被定义或修改的属性的描述符
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一，不能同时是二者。
数据描述符和存取描述符均具备如下可选键值：
configurable
当且仅当该属性的 configurable 为 true 时，该属性才可以被改变，也可以被删除。默认为 false。
enumerable
当且仅当该属性的 enumerable 为 true 时，该属性才可以出如今对象的枚举属性中。默认为 false。
数据描述符同时具备如下可选键值：
value
该属性对应的值。能够是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable
当且仅当仅当该属性的writable为 true 时，该属性才能被赋值运算符改变。默认为 false。
存取描述符同时具备如下可选键值：
get
一个给属性提供 getter 的方法，若是没有 getter 则为 undefined。该方法返回值被用做属性值。默认为undefined。
set
一个给属性提供 setter 的方法，若是没有 setter 则为 undefined。该方法将接受惟一参数，并将该参数的新值分配给该属性。默认为undefined。
使用示例：
var o = {}; // 建立一个新对象
Object.defineProperty(o, "a", {value : 37, writable : true, enumerable : true,
configurable : true});
本文主要介绍了 TypeScript 中的四种装饰器，了解装饰器的基本分类和实现原理，为咱们下一篇深刻 Angular 2 的 @NgModule、@Component、@Injectable 等经常使用装饰器作好铺垫。