title: Typescript - how to omit properties so a subset can be transferred with spread?
body: <p>Versions: Typescript 3 and React 16.</p>
  
  <p>I want to pass in custom properties and allow override of all standard HTML properties on my component.</p>
  
  <p>Component usage:</p>
  
  <pre><code>&lt;ExamplePropTransfer specialProp={"test"} style={{color:'blue'}}/&gt;
  </code></pre>
  
  <p>ExamplePropTransfer:</p>
  
  <pre><code>import * as React from "react"
  import {HTMLProps, PureComponent} from "react";
  
  export interface ExampleProps{
    specialProp: string;
    // and possibly many more
  }
  
  export class ExamplePropTransfer
  extends PureComponent&lt;ExampleProps &amp; HTMLProps&lt;HTMLSpanElement&gt;&gt; {
  
    render(){
      console.log("specialProp: " + this.props.specialProp);
  
      // (A)
      // warning.js:33 Warning: React does not recognize the
      // `specialProp` prop on a DOM element.
      // return &lt;span {...(this.props as HTMLProps&lt;HTMLSpanElement&gt;)}&gt;
      //   Example Content
      // &lt;/span&gt;
  
      // (B)
      let {specialProp, ...htmlProps} = this.props;
      return &lt;span {...htmlProps}&gt;Example Content&lt;/span&gt;
    }
  }
  </code></pre>
  
  <p>The only way I've been able to make this work is (B) in the above example code.</p>
  
  <p>But it's error prone because I'm repeating myself.  Whenever I add/remove members in <code>ExampleProps</code> I have to go maintain the destructuring statement.  </p>
  
  <p>The whole destructuring statement is superfluous. I don't <em>need</em> references to the individual properties - I'm only doing it to peel my custom properties off so they don't get passed as <code>span</code> properties.</p>
  
  <p>I tried doing (A), but that still passes <code>specialProps</code> to the <code>span</code> and causes <code>React</code> to log the warning show above.</p>
  
  <p>I'm trying to tell Typescript to "transfer all the properties from this.props except the ones defined on <code>ExampleProps</code>" <em>without having to list them explicitly</em>?</p>