属性"表数据"在材料表组件中的类型"IPerson"上不存在

Question

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

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

当我得到该项目的索引时，我犯了错误。我应该在IPerson接口中包含tableData属性吗？我该如何克服这个问题？

Answer 1

我应该将tableData属性包含到我的IPerson接口中吗？

否，因为您可能会在整个应用程序中使用IPerson接口，添加可能存在也可能不存在的tableData属性(见下文(将无法实现类型检查的目的。Typescript告诉您IPerson接口上不存在tableData，这是正确的。然而，依赖项中的底层Javascript已经为对象添加了tableData属性，用于其内部目的(如果这是获取索引的唯一方法，则为外部目的(，并且没有费心让Typescript知道。您的代码运行时，索引可供使用。

可能有更好的方法可以做到这一点，但您可以创建一个带有tableData对象的IPersonAfterRowUpdate接口：

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，并正确键入此函数！