如何在组件中实现泛型类？

Question

现在该应用程序包含几个几乎相同的组件。它们基本上都是数据模型的列表视图，带有用于过滤列表的搜索栏。

对于每个组件：

• 输入为最初选择的项目；
• 输出是一个

  select(item)

  事件发射器；
• 该组件封装了一个 API 调用来检索项目列表。

所以它们的功能实际上是相同的。从 API 加载模型数组，在列表视图中呈现它们，提供用于过滤列表的搜索栏，并将列表中选定的项目公开给父组件。

使用案例：

...
<app-customer-search [initialSelection]="myCurrentCustomer"
                     (select)="onSelectCustomer($event)>
</app-customer-search>
...

...
class CustomerComponent {
    ...
    initialSelection = input<Customer>();
    select = output<Customer>();
    ...
}

和：

...
<app-contract-search [initialSelection]="myCurrentContract"
                     (select)="onSelectContract($event)>
</app-contract-search>
...

...
class ContractComponent {
    ...
    initialSelection = input<Contract>();
    select = output<Contract>();
    ...
}

我想要实现的是将两个组件重写为一个，即

<app-select-item [modelClass]="Customer"
                 [apiFunc]="loadCustomers"
                 [initialSelection]="myCurrentCustomer"
                 (select)="onSelectCustomer($event)>
</app-select-item>

和

<app-select-item [modelClass]="Contract"
                 [apiFunc]="loadContracts"
                 [initialSelection]="myCurrentContract"
                 (select)="onSelectContract($event)>
</app-select-item>

在其他语言（例如 C#）中，可能会使用泛型类。喜欢

class ItemSelectComponent<T> where T: class, new()
{
    ...
}

假设我们将模型类称为 T，我想将输入键入为

input<T>()

，将 API 函数键入为

Func<Observable<Array<T>>>

，将输出键入为

EventEmitter<T>

。

Typescript 有什么办法可以做到这一点吗？

Answer 1

你不必通过“课程”。 typescript 可以从函数的参数推断泛型类型，或者从输入的类型推断泛型类型。

class ItemSelectComponent<T> {// can be "T extends Customer | Contract" to restrict the T
    initialSelection = input<T>();
    select = output<T>();
}

<app-select-item 
                 [initialSelection]="someNumber"
                 (select)="onSelectNumber($event)> // $event is of type number 
</app-select-item>