title: Is it possible to declare a dynamic interface?
body: <p>I'm currently translating my style solution based on <code>jss</code> to <code>typescript</code> and I've stumble in the following situation.</p>
  
  <p>Consider my basic setup</p>
  
  <pre><code>import { useStyles } from './styles'
  
  const styles = theme =&gt;({
      root : { color: 'white' },
      foo : { backgroundColor: 'red' },
  })
  
  const Component = () =&gt;{
      const classes = useStyles(styles)
  
      return &lt;div className={classes.root} /&gt;
  }
  </code></pre>
  
  <p>You pass a style's object to <code>useStyles</code> and the returned value is an object which contains all keys declared inside <code>styles</code>. So my <code>classes</code> object looks like this</p>
  
  <pre><code>{
      root : 'random-name123',
      foo : 'random-name124'
  }
  </code></pre>
  
  <p>Since I can't possibly know which keys <code>styles</code> will have, my current interface for <code>classes</code> is just a dictionary</p>
  
  <pre><code>interface Classes {
      [index: string]: string
  }
  </code></pre>
  
  <p>My question is: </p>
  
  <p>Can I declare an <code>interface</code> in such a way that all keys passed to <code>styles</code> are declared as being part of <code>Classes</code>? So that when I type <code>classes.</code> I would be able to see all possible keys for <code>classes</code>?</p>
  
  <p>In other words, I want the keys which compose <code>Classes</code> to be predictable. So that if I pass a <code>styles</code> objects like this</p>
  
  <pre><code>{
      foo : {/*...*/},
      bar: {/*...*/}
  }
  </code></pre>
  
  <p>My <code>Classes</code> interface would look like</p>
  
  <pre><code>{
      foo : string,
      bar : string
  }   
  </code></pre>