title: Is it possible to infer the keys of a Record in TypeScript?
body: <p>I am using <a href="https://github.com/cssinjs/jss" rel="noreferrer">JSS</a> and want to define a <code>style</code> object with both strongly typed keys and values, without defining the keys twice.</p>
  
  <p><strong>First attempt:</strong></p>
  
  <pre><code>const style: Record&lt;string, CSSProperties&gt; = {
    root: {
      background: 'red'
    },
    title: {
      fontWeight: 'bold'
    },
    ...
  }
  </code></pre>
  
  <p>Now <code>style</code> is not strongly typed, so the compiler gives no warning when accessing <code>style.nonExistingKey</code>.</p>
  
  <p><strong>Second attempt:</strong></p>
  
  <p>If I specify the keys explicitly like this:</p>
  
  <pre><code>const style: Record&lt;'root' | 'title' | ... , CSSProperties&gt; = {
    root: {
      background: 'red'
    },
    ...
  }
  </code></pre>
  
  <p>then I get a strongly typed Record, i.e. <code>style.nonExistingKey</code> will throw an error. However, this method requires duplicating the record keys as they must be explicitly added as a generic argument.</p>
  
  <p><strong>Third attempt:</strong></p>
  
  <p>I can create a strongly typed Record after the fact with the following code:</p>
  
  <pre><code>const styleObj = {
    root: {
      background: 'red'
    },
    title: {
      fontWeight: 'bold'
    },
    ...
  }
  
  const style = styleObj as Record&lt;keyof typeof styleObj, CSSProperties&gt;
  </code></pre>
  
  <p>However, then I lose type-checking for the <code>CSSProperties</code> values of the record, so this is not a good solution.</p>
  
  <p><strong>Is there a way to do something like this:</strong></p>
  
  <pre><code>const style: Record&lt;T, CssProperties&gt; = {
    root: {
      background: 'red'
    },
    ...
  }
  </code></pre>
  
  <p>and have <code>T</code> be automatically inferred as <code>'root' | 'title' | ...</code> etc.?</p>