typescript - 如果 JSX 标签不为空，为什么 TypeScript 会忽略 JSX 传播 props 的类型？

Question

我试图找出 TypeScript 是否真的类型检查 JSX 传播属性。我得到令人困惑的结果。这是我的小测试用例（在 TypeScript 操场上重现）：

const badProps = {
  badProp: "foo",
};

function Test1() {
  return <div {...badProps} />;
}

function Test2() {
  return <div {...badProps}> </div>;
}

观察：

• Test1正如我所料，是一个编译错误：

  Type '{ badProp: string; }' has no properties in common with type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  

• Test2似乎忽略了 spread 属性的类型，并且默默地忽略了类型不匹配。

乍一看，我会得出结论，如果标签为空，TypeScript 只会检查传播属性，这很奇怪。

是什么导致了这种不一致？这种行为是有意的吗？

标签： typescript