How to interface Output() and Input() decorators?

问题

I want to create an interface for components that generate JSON. I want to force each implementing component to accept a type as Input and produce an Output:

import { EventEmitter, Output, Input } from '@angular/core';
import { Foo, FooConfiguration } from '../../interfaces';
interface FooConfigurator {
    @Output() fooWasConfigured: EventEmitter<FooConfiguration>;
    @Input() fooInstance: Foo;
}

Then, components implementing FooConfigurator would ensure the following:

import { EventEmitter, Output, Input } from '@angular/core';
import { Foo, FooConfiguration, FooConfigurator } from '../../interfaces';
class ConcreteFooConfigurator implements FooConfigurator {
    @Output() fooWasConfigured: EventEmitter<FooConfiguration>;
    @Input() fooInstance: Foo; 
}

This interface definition fails because it is invalid syntax. How can I do it, or better approach the problem?

回答1:

It is impossible presently to interface decorators with TypeScript. The next best way is to simply interface the types and add comments about it.

interface FooConfigurator {
    fooWasConfigured: EventEmitter<FooConfiguration>;
    fooInstance: Foo;
}

This in essence pretty much covers the need, the EventEmitter will reliably looks like it should emit an event, and in fooInstance instructs the class to have such an a property. How these should be used resides in the comments realm however.

来源：https://stackoverflow.com/questions/46064339/how-to-interface-output-and-input-decorators

标签

angular

typescript

interface

decorator