Question

不确定这是否可行，但与keyof有关，我很难全神贯注...

我目前有这个界面：

interface Column<T> {
  header: string;
  field: keyof T;
  format?: (value: any) => string;
}

它的第一种用法是在给定对象和列的列表的情况下创建呈现表的内容。

const rows = [{name: 'Alice', age: 18}, {name: 'Bob', age: 12}];

type Row = typeof rows[0];

const columns: Column<Row>[] = [
  {
    header: 'Name',
    field: 'name',
    format: value => value.toUpperCase(),
  },
  {
    header: 'Age',
    field: 'age',
    format: value => value.toLocaleString(),
  },
];

const renderTable = <T>(rows: T[], columns: Columns<T>[]) { ... }
renderTable(rows, columns);

这里有没有一种方法可以消除any函数中的format类型？要以某种方式“链接” keyof T的{{1}}和field的{{1}}？即对于第一列value应该是format，对于第二列应该是value？

（我知道手动将它们打印出来非常容易，但是还会在此表中添加一些自动魔术的东西，它们将使用string和number）

Answer 1

一种方法是依靠TypeScript的mapped types。

这将“映射”通过的通用密钥（Key in keyof）中的每个键（Row）。

然后为每个Row键（例如：name，age，admin）分配一个具有您所概述形状的对象，并带有属性{{ 1}}，header和field。

但是，由于我们现在知道我们正在使用特定的键（例如：format），因此我们可以使用age在此映射类型和{{1}中引用Key }来引用age（Row[Key]）的类型。

最后，您不希望键包含嵌套的对象，只想要对象，这样我们就可以使用age有效地“抽取”这些值，查找number的所有值以及什么是左边是正确键入[keyof Row]和"age" | "name" | "admin"的所有可能列的并集类型。

field

TypeScript Playground

如何在接口内链接keyof类型

1 个答案: