reactjs - 如何在没有构造函数的情况下使用 Typescript 在 React 中正确设置初始状态？

Question

在现代 JS 中，我们可以像这样直接为 React 组件设置初始状态:

class App extends React.Component {
  state = {value: 10}

  render() {
    return <div>{this.state.value}</div>
  }
}

当我尝试使用 Typescript 执行此操作时，TSLint 说“类属性‘state’必须标记为‘private’、‘public’或‘protected’”。如果我将它设置为“私有(private)”，linter 将报告 Class 'App' incorrectly extends base class 'Component<{}, { value: number; }, any>'. Property 'state' is private in type 'App' but not in type 'Component<{}, { value: number; }, any>'.在 App .我知道我可以调整 linter 规则以跳过此类检查，但通常检查类属性的可见性是我想利用的一件好事。

在测试完所有三个选项后，仅选择“public”不会让 TSLint 抛出错误。但是由于这里的 state 代表了这个特定组件的内部状态，所以将它设置为 public 似乎很奇怪。我的做法是否正确？

class App extends React.Component<{}, { value: number }> {
  public state = { value: 10 };

  public render() {
    return <div>{this.state.value}</div>;
  }
}

在我在网上找到的所有 TS-React 教程中，都使用了构造函数，就像在旧的 JS 语法中一样。

class App extends React.Component<{}, { value: number }> {
  constructor(props: any) {
    super(props);
    this.state = { value: 10 };
  }

  public render() {
    return <div>{this.state.value}</div>;
  }
}

在 Typescript 中直接设置类属性是否被认为是一种不好的做法/风格？

Answer 1

Am I doing it the correct way?

是的。

Is setting class property directly considered a bad style in Typescript?

没有。

稍微好一点的方法

考虑将状态声明为public readonly，并使用Readonly modifier .

这将满足 TSLint，同时也为您提供一些保护，防止被错误修改(即不使用 this.setState)。尽管状态仍然暴露在外部，但这通常不是问题。

interface IState {
  value: number;
}

class App extends React.Component<{}, IState> {
  public readonly state: Readonly<IState> = {
    value: 10
  }

  public render() {
    return <div>{this.state.value}</div>
  }
}

TSLint 规则

显式声明访问修饰符是一件好事，即使它隐式地导致相同的访问。它有助于保持代码清晰，因此我不会禁用此 TSLint 规则。