Félix Gagnon-Grenier Félix Gagnon-Grenier - 3 years ago 155
TypeScript Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download