@Input()装饰器angular的泛型

Question

我想添加泛型类型到我的@Input()但我有一些问题。

我尝试访问器不能有类型参数

@Input() set tableData<K extends keyof IUser extends IOrder>(data: K) {
if (data) {
this.length = data['hydra:totalItems'];
this.dataSource.sort = this.dataSourceSort;
this.dataSource = new MatTableDataSource(data['hydra:member']);
this.selectedRows = [];
this.loading = false;
}
}

@Input() set tableData<K extends keyof IOrder>(data: K) {
if (data) {
this.length = data['hydra:totalItems'];
this.dataSource.sort = this.dataSourceSort;
this.dataSource = new MatTableDataSource(data['hydra:member']);
this.selectedRows = [];
this.loading = false;
}
}

Answer 1

通过将setter定义为泛型，基本上必须将相应的类(组件)标记为泛型，并在类级别定义类型限制。对于一般定义访问器的实际类型脚本支持似乎存在一个开放的问题:https://github.com/microsoft/TypeScript/issues/35986

要在类级别上实际定义泛型，可以这样定义:

export class YourComponent<K extends keyof IOrder>  {
@Input() set name(data: K) {
if (data) {
this.length = data['hydra:totalItems'];
this.dataSource.sort = this.dataSourceSort;
this.dataSource = new MatTableDataSource(data['hydra:member']);
this.selectedRows = [];
this.loading = false;
}
}
}

然而，看起来你的类型并不是真正匹配的，因为keyof产生了下面对象的字符串或数字文字联合。因此，数据只能是字符串类型，这显然不是这样，因为您正在尝试访问data的属性。