title: Typescript, conditional type based on the value of a string literal type
body: <p>I'm a little stuck on how to define a conditional type for typescript based on a predefined string literal</p>
  
  <p><strong>This is a mockup / example to help explain</strong> For a little background, a user is supposed to label data from images, currently there are only 2 types of things to label (for this example lets say its <code>pedestrians</code> and <code>vehicles</code>) potentially more in the future.</p>
  
  <p>In my Redux store I am storing data from an API request (request gets a new set of data to label based on one of these types). The issue is the data that i get is in different formats for the two types of things to label aka array of frames or object with values that are frame arrays.</p>
  
  <pre><code>type ILabelingTypes = "pedestrians" | "vehicles"
  </code></pre>
  
  <p>A frame would look like this</p>
  
  <pre><code>interface IFrame {
      url: string
      orientation: number
      // anything else related to a frame
  }
  </code></pre>
  
  <p>The api requests would be <code>/labeling/vehicles/new</code> with an example response </p>
  
  <pre><code>{
      // meta info about the labeling session
      frames: IFrame[]
  }
  </code></pre>
  
  <p>or <code>/labeling/pedestrians/new</code> with an example response</p>
  
  <pre><code>{
      // meta info about the labeling session
      frames: Map&lt;string, IFrame[]&gt;
  }
  </code></pre>
  
  <p>The issue I'm having now is when I define my store interface, how do i correctly type the <code>frames</code> key so that I don't have to check everywhere i go to use it what type of data it is?</p>
  
  <pre><code>interface ILabelingStore {
      labelingType: ILabelingTypes
      frames: // what do i put here?
  }
  </code></pre>
  
  <p>Meaning when i go to render or use this data I'd like to simply call methods that i know exist depending on the <code>labelingType</code> defined in the store</p>
  
  <hr>
  
  <p>For the React component side, when i go to render the frames I build a queue of frames to complete, so i need to know what type the data is in the respective component <strong>(This is what i would like to do instead of having to check the type of frames)</strong></p>
  
  <pre><code>// pedestrians component
  componentDidMount() {
      Object.entries(this.props.frames).forEach( (key, val) =&gt; this.queue.concat(val))
  }
  
  // vehicles component
  componentDidMount() {
      this.queue.concat(this.props.frames)
  }
  </code></pre>