打字稿將屬性視為未定義，當它被定義時

Question

打字稿不斷抱怨並拋出錯誤，

Property 'tableData' is missing in type '{ children?: ReactNode; }' but required in type '{ tableData: TableData; }'

這是我的代碼：

import React, { FC } from 'react';

interface TableData  {
  someField: string;
  anotherField?: string;
  someFunction?: Function;
}

const Table: FC = ({
  tableData: {
    someField,
    anotherField,
    someFunction
  }
}: {
  tableData: TableData;
}) => {
  // ...
};

Table.defaultProps = {
  tableData: {
    someField: 'field1',
    anotherField: 'field2',
    someFunction: () =>
      console.log('Some function')
  }
};

我在這里做錯了什么？

Answer 1

遵循FunctionComponent的定義，它是一個泛型類型，它期望 props 作為第一個參數提供，否則默認為空對象，稍后與children prop 結合，所以你最終只會得到children prop。

要修復它，您只需將定義傳遞給FC ：

import React, { FC } from 'react';

interface TableData  {
  someField: string;
  anotherField?: string;
  someFunction?: Function;
}

interface Props {
  tableData: TableData
}

const Table: FC<Props> = ({
  tableData: {
    someField,
    anotherField,
    someFunction
  }
}) => {
  // ...
};

打字稿游樂場