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

Question

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

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

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

当我尝试使用Typescript执行此操作时,TSLint说"类属性'状态'必须标记为'私有','公共'或'受保护'".如果我将其设置为"私有",则棉短绒将报告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抛出错误.但由于此处的状态代表了此特定组件的内部状态,因此将其设置为公共状态似乎很奇怪.我这样做是正确的吗？

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

我这样做是正确的吗？

是.

设置类属性在Typescript中直接被认为是坏样式吗？

没有.

一个稍好的方法

考虑将状态声明为public readonly,并使用Readonly修饰符.

这将满足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规则.