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是一个通用类，将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>
     );
  }
}

为什么打字稿编译器会抱怨“只读”类型（属性）上不存在属性“数据”？

2 个答案: