为什么TypeScript编译器会抱怨在类型'Readonly' (props)上不存在属性'data'？

12 浏览
0 Comments

为什么TypeScript编译器会抱怨在类型'Readonly' (props)上不存在属性'data'？

我正在学习TypeScript，但是我遇到了以下错误：

在类型'Readonly<{}> & Readonly<{ children?: ReactNode; }>'上不存在属性'data'。 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 (
        
        
     );
  }
}

0

2 答案

0 Comments

为什么TypeScript编译器会抱怨在类型'readonly' (props)上不存在属性'data'？该问题的出现原因是因为使用了泛型类React.Component，它将props类型作为其第一个参数，默认为any。解决方法是将其更改为React.Component<BigOGraphProps>。

在React中，我们经常使用React.Component来创建组件。它是一个泛型类，可以接受props类型作为参数。然而，默认情况下，它的props类型被设置为any，这意味着它可以接受任何类型的props。

然而，在某些情况下，我们希望限制组件的props类型，以提高代码的可读性和可维护性。为此，我们可以将props类型作为泛型参数传递给React.Component。

在这个问题中，TypeScript编译器抱怨在类型'readonly' (props)上不存在属性'data'。这是因为在使用React.Component创建组件时，props类型被默认设置为any，而不是我们期望的BigOGraphProps。

要解决这个问题，我们只需将React.Component的泛型参数更改为我们期望的props类型BigOGraphProps。这样，编译器将能够正确地识别并验证组件的props属性。

下面是修改后的代码示例：

class BigOGraph extends React.Component {
  render() {
    return (
      // 组件的渲染逻辑
    );
  }
}

通过将React.Component的泛型参数设置为BigOGraphProps，我们解决了TypeScript编译器抱怨属性'data'不存在的问题。现在，编译器将能够正确地检查和验证组件的props属性，提供更好的类型安全性。

0
0 Comments

TypeScript编译器报错"属性'data'在类型'Readonly' (props)上不存在的原因是因为在Component类中将BigOGraphProps传递给泛型参数，并删除了构造函数。解决方法是将构造函数重新添加到类中，并将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 {
  constructor(props: BigOGraphProps) {
    super(props);
  }
  render() {
    let leftMargin = 5;
    let data = this.props.data as any;
    return (
      

        
        
      

     );
  }
}

重新添加构造函数并将BigOGraphProps传递给泛型参数后，TypeScript编译器不再报错。

0