Question

使用对象参数调用函数时，禁止使用额外的键：

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后像这样返回JSX

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

该函数抛出您想要的错误。

Answer 2

当您尝试这样做时，

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

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

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

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

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

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

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

打字稿：防止 React 道具对象的额外键？

2 个答案: