为 ag 网格中的行数据创建动态类型答案

【问题标题】：Create a dynamic type for row data in ag grid为 ag 网格中的行数据创建动态类型
【发布时间】：2021-07-30 22:30:45
【问题描述】：

我正在尝试使用 ag-grid 开发一个独立的组件。我会将列定义从我的应用程序传递给这个独立组件，因此我将其设置为输入属性，其类型如下：

interface ColumnDef {
  field: string;
  headerName: string;
}

@Input() colDef: ColumnDef[];

现在您可以看到，我可以从我的主机（我将在其中使用这个通用组件）应用程序传递任意数量的列，但它具有不同的 ID，并且工作正常。

现在的要求是我想动态定义通用组件内的 ag-grid 的行数据类型。

假设我将列定义传递为：

[{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'}]

所以当组件接收到这个列定义时，它应该动态创建一个行数据类型为

interface rowData {
 colA: string;
 colB: string;
}

类似地，如果我将列定义传递为

[{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'},
{field: 'colC', headerName: 'Col C'}]

行数据类型应该被装箱为

interface rowData {
 colA: string;
 colB: string;
 colC: string;
}

这样我就可以使用这个界面来输入我的行数据。有什么方法可以实现吗？

提前致谢。

【问题讨论】：

标签： angular typescript ag-grid typescript-generics ag-grid-angular

【解决方案1】：

给定一些这样的数组：

const colDef = [{field: 'colA', headerName: 'Col A'},
{field: 'colB', headerName: 'Col B'},
{field: 'colC', headerName: 'Col C'}] as const;

我们可以有这些类型：

type FieldNames<T> = T extends ReadonlyArray<{ field: infer U }> ? U : never;

type Rows<T> = FieldNames<T> extends string ? Record<FieldNames<T>, string> : never;

这样两个

FieldNames<typeof colDef> 是 'colA' | 'colB' | 'colC'
Rows<typeof colDef> 是 { colA: string; colB: string; colC: string }。

但是，对于您当前的 ColumnDef 类型，typeof colDef 是 ColumnDef，因此 FieldNames<typeof colDef> 将是 Record<string, string>，这并不是特别有用。为了解决这个问题，我们需要向组件类添加一个类型参数，如下所示：

class CustomGridComponent<T extends ColumnDef> implements OnInit /* or what have you */ { 
    @Input() colDef: ReadonlyArray<T> = [] as const;
    ... 
}

（顺便说一句，使用ReadonlyArray 可以让您通过在数组末尾添加as const 来“免费”获取列定义的类型。如果您可以手动定义一些interface ABCColDef { field: 'colA' | 'colB' | 'colC'; ... } 然后@ 987654336@不是必须的。）

【讨论】：