Typescript seeing property as undefined, when it is defined

Question

Typescript keeps complaining and throwing the error,

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

Here is my code:

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')
  }
};

What am I doing wrong here?

Answer 1

Following the definition of FunctionComponent it's a generic type which expects props to be provided as a first parameter, otherwise defaults to empty object which later gets combined with children prop so you will end up with children prop only.

To fix it you just need to pass definition to 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
  }
}) => {
  // ...
};

Typescript playground