属性 'tableData' 在 MaterialTable 组件的类型 'IPerson' 上不存在

Question

我有一个 MaterialTable 组件，我向它添加了 editable 属性。对于 onRowUpdate 和 onRowDelete 方法，我想获取更新或删除项目的索引。

这是最小的可重现沙箱：https://codesandbox.io/s/busy-fast-z84qq?file=/src/App.tsx

获取项目索引时出现错误。我应该将 tableData 属性添加到我的 IPerson 界面吗？我该如何克服这个问题？

Answer 1

Should I include the tableData property to my IPerson interface?

不，因为您可能会在整个应用程序中使用您的 IPerson 界面，并且添加可能存在或可能不存在的 tableData 属性（见下文）将会破坏目的类型检查。 Typescript 告诉您 tableData 在您的 IPerson 界面上不存在，这是正确的。但是，您的依赖项中的基础 Javascript 已为您的对象附加了 tableData 属性用于其内部目的（如果这是获取索引的唯一方法，则为外部目的）并且没有不必费心让 Typescript 知道。您的代码运行，索引可供使用。

可能有更好的方法来做到这一点，但您可以创建一个 IPersonAfterRowUpdate 界面，上面有 tableData 对象：

interface IPersonAfterRowUpdate extends IPerson {
  tableData: { id: number };
}

/* ... */

onRowUpdate: (newData, oldData) =>
            new Promise<void>((resolve, _reject) => {
              setTimeout(() => {
                if (oldData) {
                  const updatedData = [...data];
                  const index = (oldData as IPersonAfterRowUpdate).tableData.id;
                  updatedData[index] = newData;
                  setData(updatedData);
                  resolve();
                }
                _reject(new Error('Could not find oldData'));
              }, 1000);
            }),

注意我们必须检查 oldData 是否存在，否则 TS 不希望我们用可能的 undefined 值索引 updatedData。

然后提交一个 PR 到这个库并正确输入这个函数！

属性 'tableData' 在 MaterialTable 组件的类型 'IPerson' 上不存在

Property 'tableData' does not exist on type 'IPerson' in MaterialTable component

javascript

reactjs

typescript

react-typescript

material-table