title: interface states and props in typescript react
body: <p>I'm working on a project that uses TypeScript as well as React and I am new to both. My question is about interface in TypeScript and how that relates to props and states. What is actually happening? My application doesn't run at all unless I declare interface props and states, but I'm using states through the React constructor function and I've seen examples where all of that information would go into 'interface  MyProps' or 'interface MyStates'. Take this code, for example:</p>
  <pre><code>&quot;use strict&quot;;
  
  import * as React from 'react'
  import NavBar from './components/navbar.tsx'
  import Jumbotron from './components/jumbotron.tsx';
  import ContentPanel from './components/contentPanel.tsx';
  import Footer from './components/footer.tsx';
  
  interface MyProps {}
  interface MyState {}
  class Root extends React.Component &lt;MyProps, MyState&gt;  {
    constructor(props) {
      super(props);
      this.state = {
        ///some stuff in here
    
      };
    }
    render() {
      return (
        &lt;div&gt;
          &lt;NavBar/&gt;
          &lt;Jumbotron content={this.state.hero}/&gt;
          &lt;ContentPanel content={this.state.whatIs}/&gt;
          &lt;ContentPanel content={this.state.aboutOne}/&gt;
          &lt;ContentPanel content={this.state.aboutTwo}/&gt;
          &lt;ContentPanel content={this.state.testimonial}/&gt;
          &lt;Footer content={this.state.footer}/&gt;
        &lt;/div&gt;
      )
    }
  }
  export default Root;
  </code></pre>
  <p>(I've removed the content in this.state just to post on here). Why do I need interface? What would be the correct way to do this, since I think I'm thinking of this in the JSX way and not the TSX way.</p>