Question

使用解构时，Typescript不会检查道具。

我已经尝试过严格的打字稿标志

让我们描述简单的组件

const Component = (props: { foo: string }) => <div />;

接下来的代码将引发打字错误

<Component foo="foo" bar="bar" />

但这不是

<Component foo="foo" {...{bar: 'bar'}} />

那么如何强制打字稿在两种代码变体上显示错误？

Answer 1

interface IProps {
    name: string;
}
const Test = <T extends IProps>(props: T & Record<Exclude<keyof T, keyof IProps>, "Only props of Test">) => <div>HELLO</div>
const FakeProps = {name: "hello", age: 24};
const Test1 = <Test {...FakeProps}/> // failure because of age

希望这会有所帮助，这应该可以解决您的问题，这是强制执行多余属性检查的常见技巧

如何强制打字稿检查变形的道具？

1 个答案: