title: How to stop TypeScript error 'Type A has no properties in common with Type B' when Type B "extends" Type A in some way
body: <p><em>(edited Title to make more general)</em></p>
  
  <p>I'm working in a codebase which uses <strong>React</strong> class components and <strong>Typescript</strong> everywhere, and I'm trying to implement <a href="https://github.com/react-dropzone/react-dropzone" rel="nofollow noreferrer">react-dropzone</a> (a lightweight, simple but effective file-drop component) using the class-based method. The Hooks implementation is cleaner and simpler but I'd prefer to avoid so as to preserve the paradigm maintained in the rest of the code.</p>
  
  <p>In all the README text for this module, it uses plain Javascript. Here's a typical example:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import Dropzone from 'react-dropzone'
  
  &lt;Dropzone onDrop={acceptedFiles =&gt; console.log(acceptedFiles)}&gt;
    {({getRootProps, getInputProps}) =&gt; (
      &lt;section&gt;
        &lt;div {...getRootProps()}&gt;
          &lt;input {...getInputProps()} /&gt;
          &lt;p&gt;Drag 'n' drop some files here, or click to select files&lt;/p&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    )}
  &lt;/Dropzone&gt;
  </code></pre>
  
  <p>This seems a fairly unusual syntax anyway... </p>
  
  <p>I've discovered that I can't just use this idiom unchanged in Typescript, so I am trying to get it to work using the following:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Dropzone, { DropzoneState } from "react-dropzone";
  
  //...
  
  export class BasicDropzone extends React.Component {
     onDrop = (files: Array&lt;File&gt;) =&gt; {
          console.log(files);
          this.files = files;
     }
  //...
      render() {
  //...
          return (
              &lt;Dropzone onDrop={this.onDrop}&gt;
                  {(state: DropzoneState) =&gt; {
                      return (
                      &lt;section className={styles.container}&gt;
                          &lt;div {...state.getRootProps({className: styles.dropzone})}&gt;
                              &lt;input {...state.getInputProps()} /&gt;
                           {/* ^^^^^ error here */}
  
                              &lt;p&gt;Drag and drop here, or click to select files&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;aside&gt;
                              &lt;h4&gt;Files&lt;/h4&gt;
                              &lt;ul&gt;{files}&lt;/ul&gt;
                          &lt;/aside&gt;
                      &lt;/section&gt;
                  )}}
              &lt;/Dropzone&gt;
          );
      }
  }
  </code></pre>
  
  <p>However the linter throws up the following error on the <code>&lt;input&gt;</code> tag:
  <code>Type '{ refKey?: string | undefined; }' has no properties in common with type 'DetailedHTMLProps&lt;InputHTMLAttributes&lt;HTMLInputElement&gt;, HTMLInputElement&gt;'. ts(2559)</code></p>
  
  <p>Just for further info, here are the Typescript definitions from the <em>react-dropzone</em> package of relevance:</p>
  
  <pre class="lang-js prettyprint-override"><code>export type DropzoneState = DropzoneRef &amp; {
    isFocused: boolean;
    isDragActive: boolean;
    isDragAccept: boolean;
    isDragReject: boolean;
    isFileDialogActive: boolean;
    draggedFiles: File[];
    acceptedFiles: File[];
    rejectedFiles: File[];
    rootRef: React.RefObject&lt;HTMLElement&gt;;
    inputRef: React.RefObject&lt;HTMLInputElement&gt;;
    getRootProps(props?: DropzoneRootProps): DropzoneRootProps;
    getInputProps(props?: DropzoneInputProps): DropzoneInputProps;
  };
  
  export interface DropzoneRef {
    open(): void;
  }
  
  export interface DropzoneRootProps extends React.HTMLAttributes&lt;HTMLElement&gt; {
    refKey?: string;
    [key: string]: any;
  }
  
  export interface DropzoneInputProps extends React.InputHTMLAttributes&lt;HTMLInputElement&gt; {
    refKey?: string;
  }
  </code></pre>
  
  <p>I'm really not sure how I can fix this - I'm relatively new to Typescript. Other Stackoverflow solutions come close but don't quite fit this issue.</p>
  
  <p>Thanks heaps in advance</p>
  
  <p>@zydnar:</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "compilerOptions": {
      "outDir": "build/dist",
      "module": "esnext",
      "target": "es5",
      "lib": ["es6", "dom"],
      "sourceMap": true,
      "allowJs": true,
      "jsx": "react",
      "moduleResolution": "node",
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "noImplicitReturns": true,
      "noImplicitThis": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "suppressImplicitAnyIndexErrors": true,
      "experimentalDecorators": true,
      "esModuleInterop": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
  
      // See https://github.com/rexxars/react-markdown/issues/207
      "allowSyntheticDefaultImports": true,
  
      // See https://stackoverflow.com/questions/52399839/typescript-duplicate-identifier-librarymanagedattributes
      // for the reason for this.
      "skipLibCheck": true,
      "baseUrl": "."
    },
    "exclude": [
      "node_modules",
      "build",
      "scripts/*.js",
      "acceptance-tests",
      "webpack",
      "jest",
      "src/setupTests.ts"
    ]
  }
  </code></pre>
  
  <p>Also here's a complete example:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { observable, action } from 'mobx';
  import { observer } from 'mobx-react';
  import Dropzone, { DropzoneState } from "react-dropzone";
  
  //const styles = require('./dropzone.css');
  
  @observer
  export class BasicDropzone extends React.Component {
      @observable files: Array&lt;File&gt; = [];
      @action onDrop = (files: Array&lt;File&gt;) =&gt; {
          console.log(files);
          this.files = files;
      }
  
      render() {
          const files = this.files.map((file: File) =&gt; (
              &lt;li 
                  key={file.name}
            &gt;
              {file.name}
            &lt;/li&gt;
          ));
          return (
              &lt;Dropzone onDrop={this.onDrop}&gt;
                  {(state: DropzoneState) =&gt; (
                      &lt;section className={"container"}&gt;
                          &lt;div {...state.getRootProps({className: "dropzone"})}&gt;
                              &lt;input {...state.getInputProps() } /&gt;
                              &lt;p&gt;Drag and drop here, or click to select files&lt;/p&gt;
                          &lt;/div&gt;
                          &lt;aside&gt;
                              &lt;h4&gt;Files&lt;/h4&gt;
                              &lt;ul&gt;{files}&lt;/ul&gt;
                          &lt;/aside&gt;
                      &lt;/section&gt;
                  )}
              &lt;/Dropzone&gt;
          );
      }
  
  }
  
  </code></pre>
  
  <p>Thanks again</p>