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

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

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

@Input() colDef: ColumnDef[];

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

现在，正如您所看到的，我可以从我的主机（在这里我将使用这个公共组件）应用程序以不同的id传递任意数量的列，这很好

现在的要求是，我想在公共组件中动态地为ag网格定义行数据的类型

假设我将列def传递为：

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

因此，当组件接收到这个列defs时，它应该动态地创建一个行数据类型，如下所示

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;
}

这样我就可以使用这个接口来输入我的行数据。 有什么方法可以实现这一点吗

---

提前感谢。

给出如下数组：

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

@Input() colDef: ColumnDef[];

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;

（顺便说一句，使用

ReadonlyArray

可以通过在数组末尾添加

as const

来“免费”获取列定义的类型。如果可以手动定义一些

接口ABCColDef{field:'colA'|'colB'|'colC'…}

则

ReadonlyArray

是不必要的。）