Làm cách nào để trang trí (chú thích) được biên dịch trong Typecript?

Question

Trong góc 2, tôi có thể tạo ra một thành phần, như thế này:

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

(nguồn: http://blog.ionic.io/angular-2-series-components/)

này sau đó được biên dịch vào ES5 thường xuyên.

Câu hỏi của tôi là trong 2 phần:

1. Những trang trí là đặc trưng cho góc. Chúng được xác định như thế nào?
2. Làm cách nào để xác định trang trí của riêng tôi?

Answer 1

Trong thực tế, bạn nên gọi trang trí "chú thích" vì nó hơi khác ;-) Chúng cho phép trang trí các đối tượng. Bài đăng trên blog này có thể cung cấp thêm một số gợi ý tại đây: http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-and-decorators.html.

Vì vậy, trang trí không phải là một cái gì đó cụ thể cho Angular. Có một đề xuất cho ES7 và chúng cũng được hỗ trợ bởi chính ngôn ngữ TypeScript. Điều này có thể được sử dụng trong conjonction với thư viện reflect-metadata (nó được chứa trong tệp angular2-polyfills.js) để đặt và nhận siêu dữ liệu cho các phần tử.

• Lớp trang trí

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

• Chức năng trang trí

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

• Parameter trang trí

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

• sở hữu lớp trang trí

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

Vì vậy, nói chung một trang trí tương ứng với một hàm. Nếu không cần phải trả lại một gói nếu bạn không sử dụng tham số. Nếu bạn muốn sử dụng các thông số cho các trang trí bạn cần một chức năng bổ sung để có được các thông số và trả về trang trí 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'); 
    }; 
} 

Đây là một plunkr tương ứng với mẫu của tôi: https://plnkr.co/edit/0VBthTEuIAsHJjn1WaAX?p=preview.

Dưới đây là liên kết có thể cung cấp cho bạn biết thêm chi tiết với nguyên cảo:

• 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

Hy vọng nó giúp bạn, Thierry