title: Interface whose properties are of types A and B only in TypeScript?
body: <p>I've created a holder for my configs with type <code>ButtonConfigs</code> like this (as suggested <a href="https://stackoverflow.com/a/57787976/8744999">in this answer</a>).</p>
  
  <pre><code>export interface ButtonConfigs {
    [key: string]: ButtonConfig;
  }
  </code></pre>
  
  <p>The I continued with other components' configs as well so that every type has its own config property in the component.</p>
  
  <pre><code>...
  buttonConfigs: ButtonConfigs = {};
  folderConfigs: FolderConfigs = {};
  txtBoxConfigs: TxtBoxConfigs = {};
  ...
  </code></pre>
  
  <p>Then it hit me that I should be able to aggregate all the configs to a common property. It really makes sense in my case, too.</p>
  
  <p>However, I'm not sure if I can change the interface in such a way that it allows for different types, still restricting the contents of the <code>configs</code> not to be <code>any</code>. My current approach is poorly designed.</p>
  
  <pre><code>export interface Configs {
    [key: string]: any;
  }
  </code></pre>
  
  <p>How can I tell TypeScript that the type of the field should be <code>TextBoxConfig</code>, <code>ButtonConfig</code> or <code>FolderConfig</code> but nothing else?</p>