如何解决React TypeScript中App.tsx组件的‘Property previousWidth does not exist on type App’错误？

这个错误是TypeScript强类型检查的正常提示——你在App类的构造函数里直接给this.previousWidth赋值，但没有在类中提前声明这个属性的类型，TypeScript无法识别这个实例属性的存在，所以抛出了错误。下面是两种可行的解决方法：

方法一：直接在类中声明属性类型 #

最简单的方式是在类的顶部显式声明previousWidth的类型，让TypeScript明确知道这个属性的存在和类型：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import SideBar from "./components/sidebar/SideBar";
import Content from "./components/content/Content";

class App extends React.Component {
  // 显式声明previousWidth的类型
  private previousWidth: number;

  constructor(props) {
    super(props);
    this.state = { isOpen: false, isMobile: true };
    this.previousWidth = -1;
  }

  updateWidth() {
    const width = window.innerWidth;
    const widthLimit = 576;
    const isMobile = width <= widthLimit;
    const wasMobile = this.previousWidth <= widthLimit;
    if (isMobile !== wasMobile) {
      this.setState({ isOpen: !isMobile });
    }
    this.previousWidth = width;
  }

  componentDidMount() {
    this.updateWidth();
    window.addEventListener("resize", this.updateWidth.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWidth.bind(this));
  }

  toggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App wrapper">
        <SideBar toggle={this.toggle} isOpen={this.state.isOpen} />
        <Content toggle={this.toggle} isOpen={this.state.isOpen} />
      </div>
    );
  }
}

export default App;

方法二：使用接口规范Props和State（更推荐） #

对于TypeScript编写的React组件，更规范的做法是定义组件的Props和State接口，同时明确类的实例属性，让代码的类型约束更清晰、可维护：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import SideBar from "./components/sidebar/SideBar";
import Content from "./components/content/Content";

// 定义组件的Props类型（当前组件没有接收外部props，所以设为{}）
interface AppProps {}
// 定义组件的State类型
interface AppState {
  isOpen: boolean;
  isMobile: boolean;
}

class App extends React.Component<AppProps, AppState> {
  private previousWidth: number;

  constructor(props: AppProps) {
    super(props);
    this.state = { isOpen: false, isMobile: true };
    this.previousWidth = -1;
  }

  updateWidth() {
    const width = window.innerWidth;
    const widthLimit = 576;
    const isMobile = width <= widthLimit;
    const wasMobile = this.previousWidth <= widthLimit;
    if (isMobile !== wasMobile) {
      this.setState({ isOpen: !isMobile });
    }
    this.previousWidth = width;
  }

  componentDidMount() {
    this.updateWidth();
    window.addEventListener("resize", this.updateWidth.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWidth.bind(this));
  }

  toggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="App wrapper">
        <SideBar toggle={this.toggle} isOpen={this.state.isOpen} />
        <Content toggle={this.toggle} isOpen={this.state.isOpen} />
      </div>
    );
  }
}

export default App;

为什么这样能解决问题？ #

TypeScript要求类的所有实例属性都必须提前声明类型，这样它才能在编译阶段进行严格的类型检查，避免运行时可能出现的“属性不存在”这类错误。通过在类中显式声明previousWidth: number，TypeScript就能够识别这个属性，错误自然就消失了。

内容的提问来源于stack exchange，提问作者rrahul789