Typescript：防止 React 道具 object 的额外键？

Question

使用 object arguments 调用函数时，禁止使用额外的键：

function foo({ key }) {}

foo({ key: 1, key2: 2 });

Argument of type '{ key: number; key2: number; }' is not assignable to parameter of type '{ key: any; }'.
  Object literal may only specify known properties, and 'key2' does not exist in type '{ key: any; }'

但是，对于 React 功能组件，此错误不会触发：

function Foo({
  obj: { key },
}) {}

<Foo obj={{ key: 1, key2: 2 }} />

有没有办法让它成为一个错误？

Answer 1

尝试将 Foo 用作示例中的组件时，出现错误'Foo' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786) 'Foo' cannot be used as a JSX component. Its return type 'void' is not a valid JSX element.ts(2786) 。

像这样修改 Foo 以返回 JSX

function Foo({ obj: { key } }) {
  return <div>{key}</div>;
}

function 会抛出您想要的错误。

Answer 2

当您尝试这样做时，TypeScript应该会产生错误。 类型推断非常好。 也许你的 eslint 配置有问题？ 如果您运行 TypeScript 编译器（不仅仅是 eslint），它会产生任何错误吗？

无论哪种方式，键入函数/React 组件道具的更好方法是更明确，如下所示：

function Foo({
  obj: { key },
}: {
  obj: {
    key: number;
  }
}) {
  // etc.
}

或者，对于某些人的口味来说更容易消化：

type FooProps = {
  obj: {
    key: number;
  }
}

function Foo({obj: {key}}: FooProps) {
  // etc
}

基本模式是function MyComponent(props: MyPropsType) {}