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

我认为它不可能按照您想要的方式执行

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

1 个答案: