title: TypeScript/React. ERROR Type '{ key: number; }' is not assignable to type ILink (SFC Component)
body: <p>So, I have a basic iterable Component <code>Link</code> that render some link. He is wrapped up in <code>Links</code> component that iterate him. Unfortunately, the problem that I faced is the <code>Typescript</code> does not understand what to do with <code>key</code> prop on <code>Link component</code> over <code>Links</code> Component iteration.</p>
  <p>I'll gradeful for any help!</p>
  <p>Error message:</p>
  <blockquote>
  <p>Type '{ key: number; }' is not assignable to type 'ILink'.</p>
  <p>Property 'title' is missing in type '{ key: number; }'.</p>
  </blockquote>
  <p>My code:</p>
  <pre><code>import React from 'react'
  import styles from './index.cssmodule.scss'
  
  interface ILinks {
    links: object[]
  }
  
  interface ILink {
    title: string
    label: string
    href: string
    icon: string
  }
  
  // Link Component
  const Link: React.SFC&lt;ILink&gt; = ({ title, label, href, icon }) =&gt; (
    &lt;a href={href + label}&gt;
      &lt;i className={icon} /&gt;
      &lt;span&gt;{title}&lt;/span&gt;
    &lt;/a&gt;
  )
  
  // Links Component that wraps Link
  const Links: React.SFC&lt;ILinks&gt; = ({ links = [] }) =&gt; {    
    const bulidLinksList = (): JSX.Element[] =&gt; (
      links.map((link, i) =&gt; (
        &lt;Link key={i} {...link} /&gt; // ERROR Type '{ key: number; }' is not assignable to type ILink
      ))
    )
  
    return (
      &lt;div className={styles.linksContainer}&gt;
        {bulidLinksList()}
      &lt;/div&gt;
    )
  }
     
  export default Links
  </code></pre>