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

Question

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

<MyComponent nonexistentProp="foo" />

此代码不是：

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

对于 TS 来说，检查是否传递了不正确的 props 似乎微不足道 - 我们如何启用此检查以确保我们传递的是预期的 props？

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} />;

我认为它不可能按照您正在寻找的方式强制执行

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

How can I get TypeScript to type-check the spread operator in React props?

reactjs

typescript

static-analysis