为什么typescript编译器抱怨类型“Readonly”（props）上不存在属性“data”？[重复]

Question

我正在学习typescript，我有点被以下错误卡住了：

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

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

biographs。数据已定义，为什么编译器会抱怨它不存在？？我肯定错过了一些关键的东西。请注意，我选择了any，因为我真的不想担心面积图的基本类型（至少现在不想，首先我想让这个部分正常工作）。

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

Answer 1

做出反应。Component是一个通用类，它将props类型作为第一个参数。它默认为any。将其更改为：

React.Component<BigOGraphProps>

Answer 2

正如@Wex所提到的，将BigOGraphProps传递给Component类中的泛型参数并删除构造函数应该就可以了

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