title: Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
body: <p>I get a syntax error when trying to access .props for the both the RecipeList.js and Recipe.js.</p>
  <p>Here is a code sample for Recipe.js:</p>
  <pre><code>import React, {Component} from 'react';
  import &quot;./Recipe.css&quot;;
  
  class Recipe extends Component {
  
      // props: any; uncommenting this will fix the bug
  
      render() {
          // don't have to use return and parentheses for arrow with JSX
          const ingredients = this.props.ingredients.map((ing, ind) =&gt; (
              &lt;li key={ind}&gt;{ing}&lt;/li&gt;
          ));
          const {title, img, instructions} = this.props
  
          return (
              &lt;div className=&quot;recipe-card&quot;&gt;
                  &lt;div className=&quot;recipe-card-img&quot;&gt;
                      &lt;img src={img} alt={title}/&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;recipe-card-content&quot;&gt;
                      &lt;h3 className=&quot;recipe-title&quot;&gt;
                          {title}
                      &lt;/h3&gt;
                      &lt;h4&gt;
                          Ingredients:
                      &lt;/h4&gt;
                      &lt;ul&gt;
                          {ingredients}
                      &lt;/ul&gt;
                      &lt;h4&gt;
                          Instructions:
                      &lt;/h4&gt;
                      &lt;p&gt;
                          {instructions}
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/iepFx.png" rel="noreferrer">Screenshot of .props error</a></p>
  <p>However, the project throws no compile-time errors and the website works perfectly fine.</p>
  <p><a href="https://i.stack.imgur.com/T3lha.png" rel="noreferrer">Screenshot of app working fine with no chrome console or terminal errors</a></p>
  <p>I'm thinking this less has to do with my code and more so with TypeScript or some sort of preset config with Javascript for VScode having trouble identifying the .props property for each component because I get similar problems when I built the <a href="https://reactjs.org/tutorial/tutorial.html" rel="noreferrer">React Tutorial Project</a> into my editor (I even copy pasted the final index.js code from the site just to be sure), despite the app working fine with no compile-time errors.</p>
  <p><a href="https://i.stack.imgur.com/0cG0u.png" rel="noreferrer">Screenshot of the same .prop errors after following React Tutorial</a></p>
  <p>The only way to solve this problem is if I actually hardcode and create a props property for each class and set it to any like so:</p>
  <p><a href="https://i.stack.imgur.com/6GqDC.png" rel="noreferrer">Screenshot of only solution to the syntax error</a></p>
  <p>Here are my updated dependencies</p>
  <pre><code>&quot;dependencies&quot;: {
    &quot;@types/react&quot;: &quot;^16.4.13&quot;,
    &quot;prop-types&quot;: &quot;^15.6.2&quot;,
    &quot;react&quot;: &quot;^16.5.0&quot;,
    &quot;react-dom&quot;: &quot;^16.5.0&quot;,
    &quot;react-scripts&quot;: &quot;1.1.5&quot;,
    &quot;typescript&quot;: &quot;^3.0.3&quot;
   }
  </code></pre>