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

Question

这感觉就像 TS 可以实现的那样，然而，我做不到。

这是我的通用组件接口：

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 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 示例

谢谢！

标签： reactjstypescripttypescript-generics

Answer 1

这是因为一个名为Excess Property checks的功能。有一些技巧可以克服它，但它们是不可靠的 -是否可以将 typescript 对象限制为仅包含其类定义的属性？

---

解释

过多的属性检查将使对象要么需要所有现有的道具 + 任何道具或任何道具。由于 Excess Property 检查，两者之间没有选项（即只允许指定的道具）。这个烦人的特性是为 TypeScript 设计的，以适应 JavaScript。我曾问过一个类似的问题 - Typescript: variable of type does not type check 在某些情况下