How to implement interface with input signals in Angular?

Before angular v17 I implemented my components like that:

export interface IEdit {
editIcon?: string;
editLink: string;
}

export class EditComponent implements IEdit {
@Input({ required: true }) editIcon?: string;
@Input() editLink: string;
}


Now my approach is:

...

export class EditComponent {
editIcon = input.required<IEdit['editIcon']>();
editLink = input<IEdit['editLink']>();
}


As you see, "implements" keyword are dissapeared. If something have to be added into the interface, typescript tells us no error.

Can you offer best approach to use new input signal feature and still implement interfaces? My project have a reason to have interfaces without InputSignals like below:

export interface IEdit {
editIcon?: InputSignal<string>;
editLink: InputSignal<string>;
}


Perhaps, I can use some casting type like this?

interface ToSignal<T> = {
[key: string]: InputSignal<T[key]>
}

export class EditComponent implements ToSignal<IEdit> {
...
}

Continue reading...