title: React Typescript Class Component Default Props Interface
body: <p>I created a simple class component with some props. Since Typescript 3 and above, they state that defaultProps by default will use the same Interface as the component's props itself. <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx" rel="nofollow noreferrer">reference</a></p>
  
  <p>In the following code example, you can see I created a component, extending React.PureComponent with a given interface. One prop is called boolean with type boolean.</p>
  
  <p>Then I got the <code>static defaultProps</code> assignment where I made an "accidental" typo where I put a string instead of a boolean.</p>
  
  <pre><code>import React from "react";
  
  export interface ExampleClassProps {
    string: string;
    arrayOfStrings: { test: string };
    boolean: boolean;
  }
  
  class ExampleClass extends React.PureComponent&lt;ExampleClassProps&gt; {
    static defaultProps = {
      string: "asd",
      arrayOfStrings: { test: "asd" },
      boolean: "true" //this should throw an error, since I'm assigning a string to type boolean
    };
    render() {
      return &lt;div&gt;{this.props.string}&lt;/div&gt;;
    }
  }
  export default ExampleClass;
  
  </code></pre>
  
  <p>From my understanding Typescript should now throw an error saying, type string is not assignable to type boolean, but it doesn't.</p>
  
  <p>I'm on Typescript 3.5.3 and I installed @types/react.</p>
  
  <p>Also, writing a similar component as a functional component does actually work, so I only got the problem with classes:</p>
  
  <pre><code>import React from "react";
  
  export interface ExampleFCProps {
    stringProp?: string;
  }
  
  const ExampleFC: React.FC&lt;ExampleFCProps&gt; = ({ stringProp }) =&gt; {
    return &lt;div&gt;{stringProp}&lt;/div&gt;;
  };
  
  ExampleFC.defaultProps = { stringProp: 1 }; //this throws an error, since number is not type string
  
  export default ExampleFC;
  
  </code></pre>