打字稿将属性视为未定义，当它被定义时

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
  }
}) => {
  // ...
};

打字稿游乐场