如何通过类/组件装饰器让TypeScript知道添加的方法？

Question

If I am decorating a Component with my own decorator, how do I let TypeScript know that I have added functionality (methods) to that class via @MyComponentDecorator

@Component({
    selector: 'MySelector',
    template: 'bar'

})
@MyComponentDecorator
export class MyClass {

    constructor(){
         this.myNewMethod('foo'); // TypeScript error as transpiler is not aware
    }
}
 ...

regards

Sean

Answer 1

You can set up an interface with the same name:

interface MyClass {
    myNewMethod(str: string): void;
}

With this:

function MyComponentDecorator(constructor: { new (): MyClass }) {
    constructor.prototype.myNewMethod = function (str: string) {
        console.log(str);
    }
}

interface MyClass {
    myNewMethod(str: string): void;
}

@MyComponentDecorator
class MyClass {
    constructor() {
         this.myNewMethod('foo');
    }
}

( code in playground )

---

Edit

You can implement the interface with the class, but then you need to do this:

interface IMyClass {
    myNewMethod(str: string): void;
}

@MyComponentDecorator
class MyClass implements IMyClass {
    constructor() {
         this.myNewMethod('foo');
    }

    myNewMethod: (str: string) => void;
}

( code in playground )

If you don't add myNewMethod as property then it complains that:

this.myNewMethod('foo'); // Error: Property 'myNewMethod' does not exist on type 'MyClass'

Answer 2

Tx to Tomer here is the final solution (beware as its not compatible with Angular AOT mode):

export function TakeUntilDestroy(constructor) {
    var original = constructor.prototype.ngOnDestroy;
    var subject;
    var unsub;
    constructor.prototype.componentDestroy = function () {
        subject = new Subject();
        return subject.asObservable();
    };
    constructor.prototype.unsubOnDestroy = function (i_unsub) {
        unsub = i_unsub;
    };
    constructor.prototype.ngOnDestroy = function () {
        original && typeof original === 'function' && original.apply(this, arguments);
        unsub === 'function' && unsub();
        subject && subject.next('ngOnDestroy') && subject.unsubscribe();
    };
}


export interface AdnetConfigTargets {
    unsubOnDestroy(i_value:Function): void;
}

@Component({
    selector: 'AdnetConfigTargets',
    moduleId: __moduleName,
    template: AdnetConfigTargetsTemplate

})
@TakeUntilDestroy
export class AdnetConfigTargets {

    constructor(private appStore: AppStore) {}

    ngOnInit() {

        this.unsubOnDestroy(()=>{
                console.log('do something when Component is destroyed')
            }
        );
    }

}