时间戳

首页 > 解决方案 > 如何让 TypeScript 对 React 道具中的扩展运算符进行类型检查？

reactjs - 如何让 TypeScript 对 React 道具中的扩展运算符进行类型检查？

问题描述

此代码在 TS 中正确标记：

<MyComponent nonexistentProp="foo" />

此代码不是：

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

TS 检查不正确的 props 没有被传入似乎微不足道 - 我们如何启用此检查以确保我们传入了预期的 props？

标签： reactjstypescriptstatic-analysis

解决方案

我怀疑这种类型检查受到与常规 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} />;

我不相信它有可能以您正在寻找的方式执行它

推荐阅读