Как оформлены декораторы (аннотации) в машинописном тексте?

Question

В Угловое 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.

Мой вопрос находится в 2-х частей:

1. Эти декораторы являются специфическими для Угловое. Как они определяются?
2. Как я могу определить свои собственные декораторы?

Answer 1

На самом деле, вы должны называть декораторы «аннотаций», так как они немного разные ;-) Они позволяют украшать объекты. Это сообщение в блоге может дать несколько советов здесь: http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html.

Таким образом, декораторы не являются чем-то специфичным для Углового. Существует предложение для 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) { 
      (...) 
  } 
  

Таким образом, в общем декоратор соответствует функции. Если нет необходимости возвращать обертку, если вы не используете параметр. Если вы хотите использовать параметры для декоратора требуется дополнительная функция, чтобы получить параметры и вернуть actualy декоратора:

// 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, propertyKey: string | symbol, 
        parameterIndex: number) { 
    console.log('decorator called'); 
    }; 
} 

Вот это plunkr, соответствующий мои образцы: https://plnkr.co/edit/0VBthTEuIAsHJjn1WaAX?p=preview.

Вот ссылки, которые могли бы дать вам более подробной информацию с машинописным текстом:

• 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

Надеется, что это помогает, Thierry