title: How to correctly set initial state in React with Typescript without constructor?
body: <p>In modern JS, we can directly set an initial state for a React component like this:</p>
  
  <pre><code>class App extends React.Component {
    state = {value: 10}
  
    render() {
      return &lt;div&gt;{this.state.value}&lt;/div&gt;
    }
  }
  </code></pre>
  
  <p>When I am trying to do this with Typescript, TSLint says "The class property 'state' must be marked either 'private', 'public', or 'protected'". If I set it to "private", the linter will report <code>Class 'App' incorrectly extends base class 'Component&lt;{}, { value: number; }, any&gt;'. Property 'state' is private in type 'App' but not in type 'Component&lt;{}, { value: number; }, any&gt;'.</code> on <code>App</code>. I am aware that I can tweak the linter rules to skip this kind of checks, but checking the visibility of class properties in general is a good thing I want to utilize.</p>
  
  <p>After testing out all three options, only choosing "public" won't get TSLint throw out errors. But since the state here represents the internal state of this specific component, setting it to public seems pretty weird. Am I doing it the correct way?</p>
  
  <pre><code>class App extends React.Component&lt;{}, { value: number }&gt; {
    public state = { value: 10 };
  
    public render() {
      return &lt;div&gt;{this.state.value}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>In all TS-React tutorials I've found online, a constructor is used, like in the old JS syntax.</p>
  
  <pre><code>class App extends React.Component&lt;{}, { value: number }&gt; {
    constructor(props: any) {
      super(props);
      this.state = { value: 10 };
    }
  
    public render() {
      return &lt;div&gt;{this.state.value}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>Is setting class property directly considered a bad practice/style in Typescript?</p>