我怎样才能让TypeScript对React道具中的传播算子进行类型检查？

Question

此代码已在TS中正确标记：

<MyComponent nonexistentProp="foo" />

该代码不是：

<MyComponent { ...{ nonexistentProp: "foo" }} />

对于TS来说，检查不正确的道具没有通过很简单-我们如何启用此检查以确保我们在传递期望的道具？

Answer 1

我怀疑这种类型检查与常规 TypeScript 代码受到相同的约束：

interface Contract {
  a: string;
}

const allowed: Contract = {
  a: "bc",
};

const notAllowed: Contract = {
  a: "bc",
  b: "dc",
};

const aboutToBeAllowed = {
  a: "bc",
  b: "dc",
};

const alsoAllowed: Contract = aboutToBeAllowed;

这里显示的问题是 TypeScript 有其局限性，因为它是一个结构类型系统。

它只能强制执行我们人类认为在对象文字赋值期间在所有情况下都应该执行的约束（请参阅notAllowed赋值）。

该alsoAllowed案例与变体本质上相同notAllowed，但它可以工作。这是因为匿名对象满足Contract约束。

同样，在您的 TSX 示例中，这与常规 TypeScript 的行为本质上相同：

interface Props { a: string; };
const MyComponent: React.SFC<Props> = (props) => <div />;

const myCompOk1 = <MyComponent a="ab" />;

const myCompBad1 = <MyComponent a="ab" b="cd" />;

const anonPropsNoExtra = { a: "bc" };
const myCompOk2 = <MyComponent {...anonPropsNoExtra} />;

const anonPropsWithExtra = { a: "bc", b: "cd" };
const myCompOk3 = <MyComponent {...anonPropsWithExtra} />;

我不相信它可以按照您想要的方式强制执行