Why does typescript compiler complain that property 'data' does not exist on type 'Readonly' (props)?

Question

I'm learning typescript and I'm a bit stuck at the following error:

Property 'data' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2339

let data = this.props.data as any;
                      ^

BigOGraphProps.data is defined, why is the compiler complaining it doesn't exist?? I must be missing something crucial here. Note that I'm casting to any because I don't really want to worry about the underlying type of AreaChart (At least not for now, first I want to get this part working).

import React from 'react';
import { AreaChart } from 'recharts';

type BigOGraphProps = {
  data: {
    n: number[],
    oLogNData: number[],
    oNData: number[],
    oNLogNData: number[],
    oNSq2Data: number[],
    o2SqNData: number[],
    oNInvData: number[],
  };
};

export default class BigOGraph extends React.Component {
  constructor(props: BigOGraphProps) {
    super(props);
  }

  render() {
    let leftMargin = 5;
    let data = this.props.data as any;

    return (
      <div>
        <AreaChart data={data} >
        </AreaChart>
      </div>
     );
  }
}

Does this answer your question? [Property 'value' does not exist on type 'Readonly<{}>'](https://stackoverflow.com/questions/47561848/property-value-does-not-exist-on-type-readonly) — tpliakas, Feb 05 '20 at 22:52

score 1 · Answer 1 · answered Feb 05 '20 at 22:50

1

React.Component is a generic class that takes the props type as its first argument. It defaults to any. Change it to:

React.Component<BigOGraphProps>

answered Feb 05 '20 at 22:50

Wex

15,539
10
64
107

score 1 · Accepted Answer · answered Feb 05 '20 at 22:55

as @Wex mentioned, passing BigOGraphProps to generic parameter within Component class and removing the constructor should do the trick

import React from 'react';

type BigOGraphProps = {
  data: {
    n: number[];
    oLogNData: number[];
    oNData: number[];
    oNLogNData: number[];
    oNSq2Data: number[];
    o2SqNData: number[];
    oNInvData: number[];
  };
};

export default class BigOGraph extends React.Component<BigOGraphProps> {
  render() {
    let leftMargin = 5;
    let data = this.props.data as any;
    return (
      <div>
        <AreaChart data={data} >
        </AreaChart>
      </div>
     );
  }
}

Why does typescript compiler complain that property 'data' does not exist on type 'Readonly' (props)?

2 Answers2