title: react/prop-types eslint error in typescript react component
body: <p>I am trying to set up a <code>typescript-react-eslint</code> project and can't get past eslint error for this boilerplate component:</p>
  
  <pre><code>import * as React from "react";
  
  interface ButtonProps {
    children?: React.ReactNode,
    onClick?: (e: any) =&gt; void,
  }
  
  const styles = {
    border: "1px solid #eee",
    borderRadius: 3,
    backgroundColor: "#FFFFFF",
    cursor: "pointer",
    fontSize: 15,
    padding: "3px 10px",
    margin: 10
  };
  
  const Button: React.FunctionComponent&lt;ButtonProps&gt; = props =&gt; (
    &lt;button onClick={props.onClick} style={styles} type="button"&gt;
      {props.children}
    &lt;/button&gt;
  );
  
  Button.defaultProps = {
    children: null,
    onClick: () =&gt; {}
  };
  export default Button;
  </code></pre>
  
  <p>The error is:</p>
  
  <pre><code>  19:26  error  'onClick' is missing in props validation   react/prop-types
    20:12  error  'children' is missing in props validation  react/prop-types
  </code></pre>
  
  <p>It seems like it is complaining about interface for html <code>&lt;button&gt;</code> is not defined?
  Otherwise it might be the <code>Button</code> component itself but should it not get type information from <code>&lt;ButtonProps&gt;</code> interface I pass there?</p>
  
  <p>I tried explicitly setting <code>children</code> and <code>onClick</code> like this:</p>
  
  <pre><code>Button.propTypes = {
    children?: React.ReactNode,
    onClick?: (e: any) =&gt; void
  };
  </code></pre>
  
  <p>it bypasses the eslint error but the component itself stops working.
  What am I doing wrong?</p>
  
  <p>P.S. This is my <code>.eslintrc.json</code></p>
  
  <pre><code>{
      "env": {
          "browser": true,
          "commonjs": true,
          "es6": true
      },
      "extends": [
          "eslint:recommended",
          "plugin:react/recommended",
          "plugin:@typescript-eslint/eslint-recommended"
      ],
      "globals": {
          "Atomics": "readonly",
          "SharedArrayBuffer": "readonly"
      },
      "settings": {
          "react": {
              "pragma": "React",
              "version": "detect"
          }
      },
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
          "ecmaFeatures": {
              "jsx": true
          },
          "ecmaVersion": 2018,
          "sourceType": "module"
      },
      "plugins": [
          "react",
          "@typescript-eslint"
      ],
      "rules": {
          "indent": [
              "error",
              2
          ],
          "linebreak-style": [
              "error",
              "unix"
          ],
          "quotes": [
              "error",
              "double"
          ],
          "semi": [
              "error",
              "always"
          ]
      }
  }
  </code></pre>