title: Readonly field is not rendered correctly
body: <p>In the <code>SubscriptionPlan</code> class below <code>MonthlyCost</code> is rendered as NaN or 0.  See the first two lines of html below.</p>
  <p>I don't know if this is a react problem or Typescript or ??.</p>
  <p>class</p>
  <pre><code>export default class SubscriptionPlan {
      public Cost: number = 0;                           
      public BillingPeriods: number = 2;                 
      public get MonthlyCost(): number { return (this.Cost / 12) * this.BillingPeriods }
  };
  </code></pre>
  <p>variable set in react:</p>
  <pre><code>const [selectedPlan, setSelectedPlan] = useState(appState.SubscriptionPlan); // not null
  </code></pre>
  <p>html (jsx)</p>
  <pre><code>&lt;span&gt;{selectedPlan === null ? 0 : selectedPlan.MonthlyCost}&lt;/span&gt; //  renders NaN
  &lt;span&gt;{selectedPlan?.MonthlyCost ?? 0}&lt;/span&gt; // renders 0
  
  &lt;span &gt;{12 / (selectedPlan?.BillingPeriods ?? 2)} Months&lt;/span&gt; // renders correctly
  &lt;span &gt;{selectedPlan?.Cost ?? 0}&lt;/span&gt; // renders correctly
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;clientapp&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.30&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.14.0&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.11&quot;,
      &quot;@stripe/stripe-js&quot;: &quot;^1.9.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
      &quot;@types/jest&quot;: &quot;^24.9.1&quot;,
      &quot;@types/jquery&quot;: &quot;3.5.0&quot;,
      &quot;@types/node&quot;: &quot;^12.12.56&quot;,
      &quot;@types/react&quot;: &quot;^16.9.49&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.5&quot;,
      &quot;bootstrap&quot;: &quot;^4.5.2&quot;,
      &quot;jquery&quot;: &quot;^3.5.1&quot;,
      &quot;msal&quot;: &quot;^1.4.0&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;popper.js&quot;: &quot;^1.16.1&quot;,
      &quot;prop-types&quot;: &quot;^15.7.2&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-bootstrap&quot;: &quot;^1.3.0&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;react-scripts&quot;: &quot;^3.4.3&quot;,
      &quot;typescript&quot;: &quot;4.1.0-dev.20201015&quot;, // also tried 4.1.0-beta
      &quot;use-async-effect&quot;: &quot;^2.2.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;,
      &quot;compile-styles&quot;: &quot;node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 ./src/App.scss ./src/App.css&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>