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) {}