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

Question

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?

Félix Adriyel Gagnon-Grenier · Accepted Answer · 2017-09-29 20:57:50Z

10

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.

answered Sep 29, 2017 at 20:57

Félix Adriyel Gagnon-Grenier

8,93510 gold badges58 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related