React类组件构造函数与state报错：Expression expected.ts(1109)排查

嘿，我来帮你搞定这个TypeScript报错的问题！你遇到的Expression expected.ts(1109)错误，主要是因为在TypeScript环境下写React类组件时，缺少了必要的类型注解，而且构造函数的写法也不符合TS的类型规范。

咱们先拆解问题根源：

• 你的App组件继承Component时，没有指定泛型类型（props和state的类型），TS无法推断组件的类型结构
• 构造函数没有接收props参数并传递给super()，即使你暂时不用props，TS也会要求这一点来保证类型一致性

下面是两种修正方案，你可以任选一种：

方案1：完善构造函数的类型注解 #

import React, { Component } from "react";

// 先定义state的类型接口，让TS明确state的结构
interface AppState {
  name: string;
  age: number;
}

// 给Component指定泛型：第一个是空对象（因为没有自定义props），第二个是我们定义的AppState
class App extends Component<{}, AppState> {
  // 构造函数接收props并加上类型注解，传给super
  constructor(props: {}) {
    super(props);
    this.state = { name: "test", age: 30 };
  }

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <h3>{this.state.age} years old</h3>
      </div>
    );
  }
}

export default App;

方案2：简化写法（省去constructor） #

如果你不需要在构造函数里做其他初始化操作，直接用类属性初始化state会更简洁，TS同样支持这种写法：

import React, { Component } from "react";

interface AppState {
  name: string;
  age: number;
}

class App extends Component<{}, AppState> {
  // 直接初始化state并指定类型
  state: AppState = { name: "test", age: 30 };

  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <h3>{this.state.age} years old</h3>
      </div>
    );
  }
}

export default App;

这两种写法都能解决你的报错问题，同时让代码更符合TypeScript的类型规范，后续维护也更方便。

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