自动类型解决仿制药

Question

我想定义具有以下属性的表列的接口：

• 标题：列的标题
• 键：特定模型中属性的钥匙(因此我可以得到值(
• ValueFormatter：格式化返回字符串的值的任何功能

ValueFormatter-unction应获得一个与属性相同类型(键(的参数。所以这样的东西。

export interface Column<T, P extends keyof T> {
  label: string;
  key: P;
  valueFormatter?: (value: T[P]) => string
};

是否有任何方法可以在另一个接口中使用它，而无需明确定义这样的" P"类型：

export interface Table<T> {
  data: T[];
  columns: Column<T>[];
}

或：如何在没有p-eneric的情况下定义列接口，并使用"键"one_answers" valueformatter"？

Answer 1

亲自我倾向于将columns作为T的每个键的对象，因为您大概不想冒险丢失其中一列：

interface Column<T, P extends keyof T> {
  label: string;
  key: P;
  valueFormatter?: (value: T[P]) => string;
}
interface TableWithColumnObject<T> {
  data: T[];
  columnObject: { [K in keyof T]: Column<T, K> };
}

那里的columnObject是一种映射类型，您会这样使用它：

interface Person {
  name: string;
  age: number;
}
const table1: TableWithColumnObject<Person> = {
  data: [{ name: "Alice", age: 35 }, { name: "Bob", age: 38 }],
  columnObject: {
    name: {
      label: "Name",
      key: "name",
      valueFormatter: name => name
    },
    age: {
      label: "Age",
      key: "age",
      valueFormatter: age => "" + age
    }
  }
};

如果您不在乎缺少其中一列(或者您想要能够错过某些列或包含重复项(，那么您可以通过使用该类型来获得所需的类型columnObject映射类型以稍微复杂的方式：

interface TableWithColumnArray<T> {
  data: T[];
  columnArray: { [K in keyof T]: Column<T, K> }[keyof T][];
}

在这里，我们采用了映射类型，并查找了其属性，并说我们想要一系列这些。因此，对于Person，该类型看起来像Array<Column<Person, "name"> | Column<Person, "age">>。我们这样使用：

const table2: TableWithColumnArray<Person> = {
  data: [{ name: "Alice", age: 35 }, { name: "Bob", age: 38 }],
  columnArray: [
    {
      label: "Name",
      key: "name",
      valueFormatter: name => name
    },
    {
      label: "Age",
      key: "age",
      valueFormatter: age => "" + age
    }
  ]
};

希望有帮助。祝你好运！

链接到代码