title: Nesting a TypeScript React component inside another
body: <p>So I'm trying to nest a TypeScript React component within another, but it complains about types. It would seem it wants me to add all of my props into the parent interface?</p>
  
  <p>Is there a way of doing this without having to have all my types listed in the child component interface, but then also having to add the types to the parent component interface?</p>
  
  <p><strong>Note:</strong> I am using Styled Components in the example below</p>
  
  <pre><code>interface IField {
    children: React.ReactNode
  }
  
  export function Field({ children, htmlFor, label, required, ...props }: IField) {
    return (
      &lt;FormField {...props}&gt;
        &lt;Label htmlFor={htmlFor} label={label} required={required}/&gt;
        {children}
      &lt;/FormField&gt;
    )
  }
  
  interface ILabel {
    htmlFor: string
    label: string
    required?: boolean
  }
  
  export function Label({ htmlFor, label, required }: ILabel) {
    return (
      &lt;FormLabel htmlFor={htmlFor}&gt;
        {label}
        {required &amp;&amp; (
          &lt;Required /&gt;
        )}
      &lt;/FormLabel&gt;
    )
  }
  </code></pre>
  
  <p>Error I get:</p>
  
  <pre><code>Type '{}' is missing the following properties from type 'ILabel': htmlFor, label
  </code></pre>
  
  <p>Thanks for any help in advance!</p>