我们有多个带有数据网格的页面,共享基本功能--分页、排序、导出.为了简化它们并加快开发速度,我想创建BaseGrid抽象组件,它将提供上述功能.

现在,为了处理出口,我们在每一行都有复选框.为了避免使用SelectionModels(如来自Angular CDK)或任何其他助手数组,我希望使用简单的布尔属性isSelected扩展数据网格DTO.然后,我们可以只使用[(ngModel)]个和三个短函数来处理 Select .

在抽象类中指定data属性的类型时,有什么方法可以做到这一点吗?

// Whatever kind of DataDTO the BaseGrid gets, I want to extend it with isSelected property
interface DATA_EXPORT_EXTENDER {
  isSelected: boolean;
}

@Directive()
export abstract class BaseGridComponent<T> implements OnDestroy {
  // Grid DTO provided as a Generic
  data: Array<DATA_EXPORT_EXTENDER extends T> = [];
  /*
    SHOWS FOLLOWING ERROR:

    Parsing error: '?' expected.eslint
    Public property 'data' of exported class has or is using private name ''.ts(4031)
    interface DATA_EXPORT_EXTENDER
  */
}

我没想到这会奏效,当然,它也没有奏效.但是,真的有办法做到这一点吗?我不得不求助于data: Array<any> = [];,否则在循环时,data.isSelected会抛出一个错误:does not exists on type T.

推荐答案

如何使用intersection operator (&)

// Whatever kind of DataDTO the BaseGrid gets, I want to extend it with isSelected property
interface DATA_EXPORT_EXTENDER {
  isSelected?: boolean; // changed here
}

@Directive()
export abstract class BaseGridComponent<T> implements OnDestroy {
  // Grid DTO provided as a Generic
  data: Array<DATA_EXPORT_EXTENDER & T> = [];    // changed here
  // or
  // data: Array<{ isSelected?: boolean; } & T> = [];
}

也不应该将数据作为.

this.data[0].isSelected

Typescript相关问答推荐

如何用不同的键值初始化角react 形式

有没有一种方法可以在保持类型的可选状态的同时更改类型?

从typescript中的对象数组中获取对象的值作为类型'

在TypeScrip中分配回调时,参数的分配方向与回调本身相反.为什么会这样呢?

TypeScrip:基于参数的条件返回类型

Express Yup显示所有字段的所有错误

如何判断对象是否有重叠的叶子并产生有用的错误消息

如何在Reaction路由v6.4加载器和操作中获得Auth0访问令牌?

有没有办法在Zod中使用跨字段验证来判断其他字段,然后呈现条件

TS2739将接口类型变量赋值给具体变量

在Reaction中折叠手风琴

当传递带有或不带有参数的函数作为组件props 时,我应该如何指定类型?

是否可以定义引用另一行中的类型参数的类型?

完全在类型系统中构建的东西意味着什么?

我可以使用JsDocs来澄清Typescript实用程序类型吗?

Vite+Chrome扩展 list v3-;不能在模块外使用import语句;对于inpage脚本

可以';t使用t正确地索引对象;联合;索引类型

定义一个只允许来自另一个类型的特定字符串文字的类型的最佳方式

如何确定剧作家中给定定位器的值?

是否可以从 TypeScript 的类型推断中排除this?