问题很简单。我有一个react组件，它有一个为props定义的接口。当我使用spread操作符传递一些未知属性时，它没有给出错误。我想得到那个错误。
界面MyProps { a：字符串; B：字符串;}
常量我的组件：ReactFC =（ prop ）=〉{ return〈〉〈/〉;};
const props = { a: "a", b: "b", c: "c" };
//Giving error be Type '{ a: string; b: string; c: string; }' is not assignable to type 'IntrinsicAttributes & MyProps'.
// Property 'c' does not exist on type 'IntrinsicAttributes & MyProps
const comp1 = <MyComponent a="a" b="b" c="3"></MyComponent>;
//Not giving error while it should because c is not the valid prop
const comp2 = <MyComponent {...props}></MyComponent>;下面是可运行的代码。我已经检查了两个github问题，但他们没有得到解决方案。
https://github.com/microsoft/TypeScript/issues/22144
https://github.com/microsoft/TypeScript/issues/18801
1条答案
按热度按时间rkue9o1l1#
据我所知，这是由设计，你不会得到这个错误，除非你也使用一些linting工具，寻找这样的东西（工具，如eslint或sonarlint）。
如果满足这个条件，那么你可以查看eslint插件eslint-plugin-unicorn，特别是名为no-unused-properties的规则，也许会有所帮助。https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/no-unused-properties.md#disallow-unused-object-properties（我没有测试它，所以不能保证它能解决问题--只是一个值得研究的想法）
如果您担心子组件访问了它不应该访问的属性，那么我建议您立即解构子组件中的props，这样就没有props对象了（尽管从技术上讲props对象包含c属性，但typescript不允许您访问它[因此props.c不可能]，除非尝试绕过它）。
例如，代替
你会的
这样，MyComponent在使用此方法时将无法访问父对象传递的任何其他属性。
因为没有更多的props对象可以被访问来保存这些额外的属性。Typescript类型检查也不允许你在MyComponent中解构比MyProps接口中定义的更多的props（同样，没有主动尝试绕过它）。
不知道这是否解决了你的问题，但这是我如何绕过它，所以我希望它能有所帮助。