title: Property 'profileStore' is missing in type '{}' but required in type 'Readonly<AppProps>'.ts(2741)
body: <p>I am using mobx react a type script</p>
  
  <p>Why does <code>&lt;MainNote/&gt;</code> show the error</p>
  
  <p>Do  i just need to set default props?</p>
  
  <p><a href="https://i.stack.imgur.com/5L5bq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5L5bq.png" alt="enter image description here"></a></p>
  
  <pre><code>Property 'profileStore' is missing in type '{}' but required in type 'Readonly&lt;AppProps&gt;'.ts(2741)
  MainNote.tsx(9, 3): 'profileStore' is declared here.
  (alias) class MainNote
  import MainNote
  </code></pre>
  
  <p>I do not want to pass the prop in as it is  a prop ejected by mobx.</p>
  
  <p>Thanks for the help</p>
  
  <hr>
  
  <p>The code is below</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import MainNote from './MainNote';
  import { observable, computed } from 'mobx'
  import { observer, inject, IStoresToProps } from 'mobx-react'
  import { IStore } from '../interfaces/store/IStore'
  import style from '../styles/App.module.css';
  import { IProfileStore } from '../interfaces/Profile/IProfileStore';
  import { iProfile } from '../interfaces/Profile/iProfile';
  
  
  interface AppProps {
    profileStore?: IProfileStore
  }
  
  export interface IProfileStore {
      profile: iProfile,
      counter: number,
      loadProfile?: () =&gt; void
    }
  
  @inject("profileStore")
  @observer
  class App extends Component&lt;AppProps&gt; {
    static defaultProps = { profileStore: {counter: 0}};
    render() {
      return (
        &lt;div className={`container-fluid w-100 h-100 ${style.background}`}&gt;
          &lt;MainNote/&gt;
          {console.log('props', this.props.profileStore) }
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import { observable, computed } from 'mobx'
  import { observer, inject, IStoresToProps } from 'mobx-react'
  import style from '../styles/MainNote.module.css'
  import { IStore } from '../interfaces/store/IStore'
  import {IProsStore} from '../interfaces/store/IPropsStore'
  
  interface AppProps {
    profileStore: IProfileStore;
  }
  
  interface IProfileStore {
    profile: iProfile;
    counter: number;
    loadProfile?: () =&gt; void;
  }
  
  interface iProfile
  {
      Details: iDetails;
      Address: iAddress;
      Notes: iNote[];
  }
  
  interface iDetails
  {
      Name: string;
      Email: string;
      Age: number;
      CellNumber: number;
  }
  
  interface iAddress
  {
      No: number;
      Road: string;
      Street: string;
      Place: string;
  }
  
  interface iNote
  {
      Date: Date | string;
      Subject: string;
      Text: string;
      Private: boolean;
      Archived: boolean;
  }
  
  
  
  
  @inject("profileStore")
  @observer
  class MainNote extends Component&lt;AppProps&gt; {
    render() {
      const { Address } = this.props.profileStore.profile;
  
      console.log('s', this.props.profileStore.profile.Address.No)
      return (
        &lt;div className={style.makeLookCool}&gt;
          &lt;ul className="list-group"&gt;
            &lt;li className="list-group-item"&gt;{Address.No} {Address.Place} {Address.Road} {Address.Street}&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  export default MainNote;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import 'bootstrap/dist/css/bootstrap.css';
  import './styles/index.css';
  import App from "./componenets/App";
  import { Provider } from 'mobx-react';
  import {IProsStore} from './interfaces/store/IPropsStore'
  
  import * as serviceWorker from './serviceWorker';
  
  
  // import NotesStore from "./NotesStore";
  // import CounterStore from "./CounterStore";
  import ProfileStore from './store/ProfileStore';
  import { IStore } from './interfaces/store/IStore';
  
  const Store: IStore = {
      profileStore: new ProfileStore(),
  };
  
  ReactDOM.render(
      &lt;Provider {...Store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
  document.getElementById('root'));</code></pre>
  </div>
  </div>
  </p>