Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 984
Félix Adriyel Gagnon-Grenier Avatar asked Jan 30 '23 15:01

Félix Adriyel Gagnon-Grenier


1 Answers

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.

like image 58
Félix Adriyel Gagnon-Grenier Avatar answered Feb 05 '23 16:02

Félix Adriyel Gagnon-Grenier