reactjs - 从传递给通用 React 组件的回调返回的对象属性的 Typescript 验证？

Question

这感觉用 TS 很容易实现，但我做不到。

这是我的通用组件接口(interface):

export interface DataTableProps<T> {
  data: {
    id: string;
    view: T;
  }[];

  cellModifications?: (
    cellData: T[keyof T],
    rowId: string,
  ) => {
    [key: string]: TableCellProps & {  // trying to find better typing here for key: string
      content?: string | number | JSX.Element;
    };
  };
}

我是这样用的:

<DataTable<StatsFormatted>
      data={list}
      cellModifications={
        (cellData, id) => ({
          statName: {
            align: 'center',
            content: cellData,
          },
        })
      }
    />

所以事情是，从 cellModification 返回的对象回调必须仅包含list中的键传递给了 data支柱。我正在尝试为此编写 TS 验证。

到目前为止我尝试过的是:

• 我转换了 [key: string]在 [key in key of T] 的界面中效果很好，它开始得到验证。但是，这需要 所有 T 中的字段目的。这对我的情况没有用，我只想传递其中的一些。
• 我也试过[key in key of Partial<T>] .问题在于，即使它根据 T 检查属性它仍然接受任何额外的 key 。所以还是不好。
• 然后，我尝试了这个:

[key in StrictPropertyCheck<
   T,
   keyof Partial<PolicyStats['view']>,
   'bad key'
>]

用这个

export type StrictPropertyCheck<T, TExpected, TError> = T extends TExpected
  ? Exclude<keyof T, keyof TExpected> extends never
    ? T
    : TError
  : TExpected;

而这个实际上做了我试过的第一件事所做的，并给出了一个错误，期望 所有 T 中的字段.

有没有人看到我做错了什么？这是一个 TS Playground example

谢谢!

Answer 1

这是因为一个名为 Excess Property checks 的功能.有一些技巧可以克服它，但它们不可靠 - Is it possible to restrict typescript object to contain only properties defined by its class?

---

解释

过多的属性检查将使对象要么需要所有现有的 Prop + 任何 Prop 或任何 Prop 。由于 Excess Property 检查，两者之间没有选项(即只允许指定的 Prop )。这个恼人的特性是为 TypeScript 设计的，以适应 JavaScript。我问过类似的问题 - Typescript: variable of type doesn't type check under certain circumstances