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

在现代JS中,我们可以直接为React组件设置一个初始状态,如下所示：

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

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

当我尝试使用Typescript执行此操作时,TSLint说“类属性’状态’必须标记为’私有’,’公共’或’受保护’”.如果我将其设置为“private”,则linter将报告Class’App’错误地扩展基类’Component< {},{value：number; },任何>‘.属性’state’在’App’类型中是私有的,但在’Component< {},{value：number; },任何>‘.在App上.我知道我可以调整linter规则以跳过这种检查,但是检查类属性的可见性通常是我想要利用的好事.

测试完所有三个选项后,只选择“public”不会导致TSLint抛出错误.但由于此处的状态代表了此特定组件的内部状态,因此将其设置为公共状态似乎很奇怪.我这样做是正确的吗？

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中直接被认为是一种不好的做法/风格？

Am I doing it the correct way?

是.

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

没有.

一个稍好的方法

考虑将状态声明为公共只读,并使用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规则.