title: Point TypeScript at the right type if property might be of different types
body: <p>I have a component with conditional rendering, it looks like this:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;h-full cursor-pointer &quot; @click=&quot;$emit('click')&quot;&gt;
      &lt;img
        v-if=&quot;media.type === 'image'&quot;
        class=&quot;h-full w-auto object-contain&quot;
        :src=&quot;media.object.domain + media.object.imageUrl&quot;
        :alt=&quot;media.object.alt&quot;
      /&gt;
      &lt;MediaVideoProvider
        v-else
        :preview=&quot;preview&quot;
        :value=&quot;media.object&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The template of component is simple:
  if media.type === 'image' <code>&lt;img&gt;</code> element would be rendered,
  otherwise - <code>&lt;MediaVideoProvider&gt;</code> component, that takes care of rendering of all kinds of videos.</p>
  <p><code>media.type</code> could be either 'image' or 'video'.
  The problem is that TypeScript complains about the type of <code>value</code> prop that <code>MediaVideoProvider</code> component expects.
  <a href="https://i.stack.imgur.com/EtmQ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EtmQ2.png" alt="enter image description here" /></a></p>
  <p>Is there a way to tell TypeScript that if we are going to render <code>MediaVideoProvider</code> component, <code>media.object</code> would always be type of <code>MediaVideo</code> ?</p>
  <p><code>media</code>'s interface looks like this:</p>
  <pre><code>export interface Media {
    type: MediaType
    object: MediaImage | MediaVideo
  }
  </code></pre>