来自自己财产的动态接口

Question

我想知道这在 TypeScript 上是否可行。

我有一个这样的界面：

interface ComplexTable extends BaseTable {
    headers: HeaderOptions[];
    datas: { [id: string]: string }[];
  }

HeaderOptions 只是一个带有 label 和一个 id 的接口

有没有办法只允许之前给出的数据标头 id？

例如我有

const table: ComplexTable = {
  headers: [
    { id: 'a', label: 'Name' },
    { id: 'b', label: 'Last Name' },
  ]
}

我不想只允许只有键“a”和“b”的数据对象。

这应该工作

const table: ComplexTable = {
  headers: [
    { id: 'a', label: 'Name' },
    { id: 'b', label: 'Last Name' },
  ],
  datas: someData.map((data) => ({
    a: data.someValue,
    b: data.someOtherValue
  }))
}

这不应该工作

const table: ComplexTable = {
  headers: [
    { id: 'a', label: 'Name' },
    { id: 'b', label: 'Last Name' },
  ],
  datas: someData.map((data) => ({
    a: data.someValue,
    c: data.someOtherValue
  }))
}

Answer 1

你可以这样做，但这需要一些工作：

• 您需要对ComplexTable进行参数化，以便它可以将相同的规则应用于其成员headers和datas 。
• 您需要参数化HeaderOptions以便它可以从id中读取键，而不是将它们视为普通string 。
• 您需要指定datas以采用映射类型[id in K] 。
• 您需要一个标识 function ，以便 TypeScript 可以在您构建表时推断参数。

那看起来像这样：

interface HeaderOptions<K> {
  id: K;
  label: string;
}

interface ComplexTable<K extends string> extends BaseTable {
  headers: HeaderOptions<K>[];
  datas: { [id in K]: string }[];
}

function complexTable<K extends string>(table: ComplexTable<K>) {
  return table;
}

所以你可以像这样调用它：

const shouldWork = complexTable({
  headers: [
    { id: 'a', label: 'Name' },
    { id: 'b', label: 'Last Name' },
  ],
  datas: someData.map((data) => ({
    a: data.someValue,
    b: data.someOtherValue
  }))
});

游乐场链接

请注意，就像在 playground 中一样，TypeScript 不会介意您提供的数据密钥多于它在headers中所知道的数量； 但是，如果缺少任何数据键，它会抱怨。