具有set Input()的可重用组件任何类型都是一种好习惯吗?

时间:2019-06-07 05:26:04

标签: html angular typescript reference typescript-typings

我创建了一个可重用的组件,该组件接受任何类型的元素的列表。他处理这些元素,并在按下按钮的情况下返回他得到的列表的状态。我担心在这种情况下会丢失输入。这是安全的解决方案吗?我希望该组件可重用。是否可以从任何类型动态转换为其他类型?

我试图在set Input()中强制转换对象,但不可能

export class ReusableTableComponent {
  @Input() list: any[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<any>;
  selectedItemsList: any[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}

问题是,eventEmmiter返回的对象类型不是特定类型。

2 个答案:

答案 0 :(得分:4)

您可以使用通用类型:

export class ReusableTableComponent {
  @Input() list: T[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<T>;
  selectedItemsList: T[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}

在此处详细了解TypeScript中的泛型类型: https://www.typescriptlang.org/docs/handbook/generics.html

答案 1 :(得分:1)

是的,您可以在Typescript中使用动态类型

export class ReusableTableComponent<LIST, EVENTLIST> {
  @Input() list: LIST[];
  @Output() selectedItems: EventEmmiter = new EventEmmiter<EVENTLIST>;
  selectedItemsList: EVENTLIST[] = [];

  emitChanges() {
  this.selectedItems.emit(this.selectedItemsList)}

}