装饰器(注释)如何在Typescript中编译？

在Angular 2中,我可以创建一个组件,如下所示：

import {Component,Template} from 'angular2/angular2'

@Component({
  selector: 'my-component'
})
@View({
  inline: "<div>Hello my name is {{name}}</div>"
})
export class MyComponent {
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is',this.name)
  }
}

(来源：http://blog.ionic.io/angular-2-series-components/)

然后将其编译为常规ES5.

我的问题分为两部分：

>这些装饰师是特定于角度的.他们如何定义？
>如何定义我自己的装饰器？

事实上,你应该调用“注释”装饰器,因为它有点不同;-)它们允许装饰对象.这个博文可以在这里给出更多的提示： http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html.

所以装饰者并不是Angular所特有的.有一个ES7的建议,它们也受到TypeScript语言的支持.这可以与reflect-metadata库(它包含在angular2-polyfills.js文件中)结合使用,以设置和获取元素的元数据.

>装饰师

export function MyClassDecorator(value: string) {
  return function (target: Function) {
    Reflect.defineMetadata("MyClassDecorator",value,target);
  }
}

@Component({ ... })
@MyClassDecorator("my Metadata")
export class AppComponent {
  constructor() {
    let decoratorValue: string
      = Reflect.getMetadata("MyClassDecorator",this.constructor);
  }
}

>功能装饰器

export function log(target: Object,propertyKey: string,descriptor: TypedPropertyDescriptor<any>) {
  var originalMethod = descriptor.value;

  descriptor.value = function(...args: any[]) {
    console.log("The method args are: " + JSON.stringify(args));
    var result = originalMethod.apply(this,args);
    console.log("The return value is: " + result);
    return result;
  };

  return descriptor;
}

export class AppComponent {
  constructor() { }

  @MyMethodDecorator
  getMessage() {
    return 'test';
  }
}

>参数装饰器

export function MyParameterDecorator(param1) {
  return function(target: any,methodKey: string | symbol,parameterIndex: number) {
    (...)
  };
}

>类属性装饰器

export function MyPropertyDecorator(target: any,propertyKey: string | symbol) {
  (...)
}

所以一般来说,装饰器对应一个功能.如果不使用参数,则不需要返回包装.如果要为装饰器使用参数,则需要一个附加函数来获取参数并返回实际装饰器：

// In the case of a parameter decorator
// myMethod(@MyDecoratorWithoutParameter someParam) { ... }
export function MyDecoratorWithoutParameter(target: any,propertyKey: string | symbol,parameterIndex: number) {
  console.log('decorator called');
}

// myMethod(@MyDecoratorWithParameter('test') someParam) { ... }
export function MyDecoratorWithParameter(param1) {
  // param1 contains 'test'
  return function(target: any,parameterIndex: number) {
    console.log('decorator called');
  };
}

这是一个与我的样品对应的plunkr：https://plnkr.co/edit/0VBthTEuIAsHJjn1WaAX?p=preview.

以下是可以使用TypeScript为您提供更多详细信息的链接：

> How to implement a typescript decorator?
> How to avoid hard coded this? in Decorators
> http://blogs.msdn.com/b/typescript/archive/2015/04/30/announcing-typescript-1-5-beta.aspx

希望它帮助你,蒂埃里

装饰器(注释)如何在Typescript中编译？

猜你在找的Angularjs相关文章