title: Typescript generics for react component taking array of records and array of keys
body: <p>I'm trying to create a simple typed react component for rendering a table from an array of objects. The data input is in the format of:</p>
  
  <pre class="lang-js prettyprint-override"><code>// array of records containing data to render in the table
  data = [
    {
      one: 1,
      two: 2,
      three: 3,
    },
    {
      one: 11,
      two: 22,
      three: 33,
    }
  ]
  
  // subset of keys from the data to render in the table
  labels = [
    'one',
    'three',
  ]
  </code></pre>
  
  <p>The component is as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>function Table&lt;T extends Record&lt;string, string | number&gt;, K extends Extract&lt;keyof T, string&gt;&gt;({
      labels,
      data
  }: {
      labels: K[];
      data: T[];
  }) {
      return (
          &lt;table className="table"&gt;
              {/* ... */}
          &lt;/table&gt;
      );
  }
  </code></pre>
  
  <p>Testing it, it seems to work only when the labels is created in the prop and not before:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Works
  &lt;Table labels={['one']} data={data} /&gt;
  
  // Does not work
  const labels = ['one']
  &lt;Table labels={labels} data={data} /&gt;
  // Type 'string[]' is not assignable to type '("one" | "two" | "three")'
  </code></pre>
  
  <p>Does anyone know how to fix the typing so that the second method works and I don't have to create the labels array inline?</p>