Come vengono decorati i decoratori (annotazioni) in Typescript?

Question

In angolare 2, posso creare un componente, come questo:

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) 
    } 
} 

(fonte: http://blog.ionic.io/angular-2-series-components/)

Questo è poi compilate in regolare ES5.

La mia domanda è in 2 parti:

1. Questi decoratori sono specifici per angolare. Come sono definiti?
2. Come definire i miei decoratori?

Answer 1

In effetti, si dovrebbe chiamare decoratori "annotazioni" poiché è leggermente diverso ;-) Consentono di decorare oggetti. Questo post sul blog può fornire ulteriori suggerimenti qui: http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html.

Quindi i decoratori non sono qualcosa di specifico per Angular. Esiste una proposta per ES7 e sono supportati anche dal linguaggio TypeScript stesso. Questo può essere usato in congiunzione con la libreria reflect-metadata (è contenuta nel file angular2-polyfills.js) per impostare e ottenere i metadati per gli elementi.

• Classe decoratore

  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); 
      } 
  } 
  

• decoratore Funzione

  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'; 
      } 
  } 
  

• Parametro decoratore

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

• proprietà Class decoratore

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

Quindi, in generale, un decoratore corrisponde a una funzione. Se non è necessario restituire uno wrapping se non si utilizza il parametro. Se si desidera utilizzare i parametri per il decoratore è necessario un ulteriore funzione per ottenere i parametri e restituire il decoratore 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'); 
    }; 
} 

Ecco un plunkr corrispondente ai miei campioni: https://plnkr.co/edit/0VBthTEuIAsHJjn1WaAX?p=preview.

Ecco i link che potrebbero dare maggiori dettagli con dattiloscritto:

• 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

Spero che ti aiuta, Thierry