为什么 typescript 编译器会抱怨属性 'data' 在 'Readonly' 类型（道具）上不存在？

Question

我正在学习打字稿，但我遇到了以下错误：

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

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

BigOGraphProps.data 已定义，为什么编译器会抱怨它不存在？？我一定在这里遗漏了一些重要的东西。请注意，我正在转换为 any 因为我真的不想担心 AreaChart 的基础类型（至少现在不是，首先我想让这部分工作）。

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

React.Component 是一个泛型 class ，它将 props 类型作为第一个参数。它默认为 any。将其更改为：

React.Component<BigOGraphProps>

Answer 2

如@Wex 所述，将 BigOGraphProps 传递给组件 class 中的通用参数并删除构造函数应该可以解决问题

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

为什么 typescript 编译器会抱怨属性 'data' 在 'Readonly' 类型（道具）上不存在？

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

reactjs

typescript

recharts

为什么 typescript 编译器会抱怨 属性 'data' 在 'Readonly' 类型（道具）上不存在？

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

reactjs

typescript

recharts

为什么 typescript 编译器会抱怨属性 'data' 在 'Readonly' 类型（道具）上不存在？