如何在组件中使用角度6类装饰器？

Question

I create a component in angular 6 with sample on how to implement decorators. So, I create a custom decorator called @Course and set a value there, named Angular 6. Now, how to get that value in my component's constructor?

I want to log the "Angular 6" value to my constructor. How's that possible?

Here is my code. Work's fine. I've got the value. But got an error in command line

ERROR in src/app/components/decorators/decorators.component.ts(19,22): error TS2339: Property 'course' does not exist on type 'DecoratorsComponent'.

import { Component, OnInit } from '@angular/core';

function Course(target) {
  Object.defineProperty(target.prototype, 'course', {
    value: () => "Angular 6"
  })
}

@Course
@Component({
  selector: 'app-decorators',
  templateUrl: './decorators.component.html',
  styleUrls: ['./decorators.component.scss']
})
export class DecoratorsComponent implements OnInit {

  constructor() {
    console.log(this.course());
  }

  ngOnInit() {
  }
}

Answer 1

target.prototype.course =（）=>'Angular 6';

Answer 2

You just need to tell TypeScript compilier about dynamically added property. The simplest way :

@Course
// ...
export class DecoratorsComponent implements OnInit {
    // ... 
    [key: string]: any;
}

Alternatively, you read the dynamic property as "array item":

constructor() {

    const courseProp = this['course'];

    if (courseProp) {
        console.log(courseProp());
    }
}

NOTE: it is good practice to check existence of the property, because decorator may be removed.