为什么打字稿编译器抱怨“只读”类型（道具）上不存在属性“数据”？ [复制]答案

【问题标题】：Why does typescript compiler complain that property 'data' does not exist on type 'Readonly' (props)? [duplicate]为什么打字稿编译器抱怨“只读”类型（道具）上不存在属性“数据”？ [复制]
【发布时间】：2020-05-21 22:06:25
【问题描述】：

我正在学习打字稿，但我有点卡在以下错误中：

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

【问题讨论】：

这能回答你的问题吗？ Property 'value' does not exist on type 'Readonly<{}>'

标签： reactjs typescript recharts

【解决方案1】：

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

React.Component<BigOGraphProps>

【讨论】：

【解决方案2】：

正如@Wex 提到的，将BigOGraphProps 传递给组件类中的泛型参数并删除构造函数应该可以解决问题

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

【讨论】：