如何在 Angular 中实现与输入信号的接口？

Question

在 Angular v17 之前，我实现了这样的组件：

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

现在我的做法是：

...

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

如您所见，“implements”关键字消失了。如果必须在界面中添加某些内容，打字稿会告诉我们没有错误。

您能否提供使用新输入信号功能并仍然实现接口的最佳方法？我的项目有一个理由有接口没有输入信号如下：

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

也许我可以使用像这样的铸造类型？

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

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

Answer 1

定义接口，类型如下，由于一个输入不是强制的，所以可以有

string | undefined

。

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

您应该设置信号使用的类型，右侧部分需要定义类型，以便信号函数知道它处理的类型。

...
export class App implements IEdit {
  editIcon = input.required<string>();
  editLink = input<string | undefined>();
}