1

I am quite new to Typescript, but I have to debug somebody else's code. It is about a component in components\ViewTable.tsx which worked previously, before updating TS/JS packages. It contains the following code

\\ Lines 8-9
import { Table } from "antd";
const { Column, ColumnGroup } = Table;
\\ Line 52
class MyTable extends Table<Interfaces.ViewEntry>;
\\ ...
export class ViewTable extends React.Component<ViewTableProps, ViewTableState> {
   render() {
        return (
            <div>
                <div className="view-table">
\\ Line 97ff
                    <MyTable size="small" dataSource={this.props.viewData}
                        rowKey={(record) => (record.GeneralLedgerId).toString()}
                        locale={{ emptyText: 'No applicable view data found' }}
                        pagination={false}>
\\ ...

This used to work, but after an update to the most recent versions of React(-Dom) (both version 16.10.2), Antd (version 3.24.0), Typescript (version 3.6.4), I get errors galore:

Error TS2459 (TS) Type 'ComponentClass, "loading" | "footer" | "style" | "title" | "scroll" | "size" | "children" | "className" | "prefixCls" | "locale" | "getPopupContainer" | "onChange" | "dataSource" | ... 27 more ... | "sortDirections">, any>' has no property 'ColumnGroup' and no string index signature. 9
Error TS2459 (TS) Type 'ComponentClass, "loading" | "footer" | "style" | "title" | "scroll" | "size" | "children" | "className" | "prefixCls" | "locale" | "getPopupContainer" | "onChange" | "dataSource" | ... 27 more ... | "sortDirections">, any>' has no property 'Column' and no string index signature. 9
Error TS1005 (TS) '(' expected. 52
Error TS2348 (TS) Value of type 'ComponentClass, "loading" | "footer" | "style" | "title" | "scroll" | "size" | "children" | "className" | "prefixCls" | "locale" | "getPopupContainer" | "onChange" | "dataSource" | ... 27 more ... | "sortDirections">, any>' is not callable. Did you mean to include 'new'? 52
Error TS2339 (TS) Property 'size' does not exist on type '{}'. 97
Error TS2607 (TS) JSX element class does not support attributes because it does not have a 'props' property. 97
Error TS2605 (TS) JSX element type 'MyTable' is not a constructor function for JSX elements. Property 'render' is missing in type 'MyTable'. 97

Reading documentation and searching on the web with different search terms did not help. May you be so kind and give me a hint what is happening?

Some thoughts

In order to align the react types with those of ant.design, see https://ant.design/docs/react/use-in-typescript but I was not too successful.

References

B--rian
  • 5,578
  • 10
  • 38
  • 89
  • I suspect that you have mismatching type definitions. Ensure that you react types align with Antd types. – ethane Oct 18 '19 at 08:29
  • first thing i see is MyTable is class but is used like an interface in your code, rather it should have a body and implement Table. except you wanted to use
    directly instead of using     – Mudiaga Ejenavi Oct 23 '19 at 13:18
  • Like the @MudiagaEjenavi said, MyTable has no implementation, this is what the error is telling you with: `JSX element type 'MyTable' is not a constructor function for JSX elements.` Try replace MyTable with Table – r3dst0rm Oct 24 '19 at 13:00
  • @r3dst0rm Well, if I understand the code correctly, `MyTable` is supposed to be inherited from `Table` (from Antd). The interesting thing is that this construct worked before the update. – B--rian Oct 24 '19 at 13:04
  • Assuming that `Table` is a React component which comes from `antd` you cannot `inherit` solely with the extends keyword. If you say, that this worked before, I believe you but apparently this doesn't work anymore for some reason, maybe the Table import was in before just an interface? Does MyTable have any specific implementation some where? – r3dst0rm Oct 24 '19 at 13:17
  • What you could try though is: `const MyTable = Table`. – r3dst0rm Oct 24 '19 at 13:19

0 Answers0