title: Specify specific props and accept general HTML props in Typescript React App
body: <p>I have a React Wrapper Component, that accepts some props, but forwards all others to the child component (especially relevent for native props like className, id, etc.).</p>
  
  <p>Typescript complains, however, when I pass native props. See error message:</p>
  
  <blockquote>
    <p>TS2339: Property 'className' does not exist on type
    'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt; Wrapper > &amp; Readonly&lt; {
    children?: ReactNode; }> &amp; Readonly&lt; WrapperProps>'.</p>
  </blockquote>
  
  <p><strong>How can I get a component with specific props that also accepts native props (<em>without</em> accepting any props and giving up on type checking)?</strong></p>
  
  <p>My code looks like this:</p>
  
  <pre><code>interface WrapperProps extends JSX.IntrinsicAttributes {
    callback?: Function
  }
  
  export class Wrapper extends React.Component&lt;WrapperProps&gt;{
    render() {
      const { callback, children, ...rest } = this.props;
      return &lt;div {...rest}&gt;
        {children}
      &lt;/div&gt;;
    }
  }
  
  export const Test = () =&gt; {
    return &lt;Wrapper className="test"&gt;Hi there&lt;/Wrapper&gt;
  }
  </code></pre>
  
  <p>FYI: I found a similar question here, but the answer basically gives up type checking, which I want to avoid: <a href="https://stackoverflow.com/q/44349409/9430509">Link to SO-Question</a></p>