title: TypeScript can't infer generic type when T is conditional
body: <p>I'm trying to write a React component where its properties change based on the type of a generic property.</p>
  <pre class="lang-ts prettyprint-override"><code>interface PropsBase&lt;T&gt; {
    value: T;
    children: (value: T) =&gt; ReactElement;
  }
  
  type ArrayType&lt;T extends any[]&gt; = T extends Array&lt;infer U&gt; ? U : never;
  
  interface ArrayProps&lt;T extends any[]&gt; extends Omit&lt;PropsBase&lt;T&gt;, 'children'&gt; {
    children: (value: ArrayType&lt;T&gt;, index: number, array: T) =&gt; ReactElement;
  }
  
  type Props&lt;T&gt; = T extends any[] ? ArrayProps&lt;T&gt; : PropsBase&lt;T&gt;;
  
  const MyComp = &lt;T extends any&gt;({ value, children }: Props&lt;T&gt;) =&gt; {
    if (Array.isArray(value)) {
      return &lt;&gt;{value.map(children)}&lt;/&gt;;
    }
    
    return &lt;div&gt;{children(value)}&lt;/div&gt;;
  };
  </code></pre>
  <p>If <code>value</code> is an array, then the child it expects is a function that's applied to each element in the array.  Otherwise it expects a function that just takes in the value.</p>
  <p>For reasons I have yet to determine, when <code>Props</code> is conditional as it is above, it cannot determine the type of <code>T</code>.</p>
  <pre class="lang-ts prettyprint-override"><code>const val = { a: 10 };
  const rendered = 
    &lt;MyComp value={val}&gt;
      {value =&gt; &lt;span&gt;{value.a}&lt;/span&gt;}
    &lt;/MyComp&gt;;
  
  // error: Object is of type 'unknown'.
  </code></pre>
  <p>This is the case even if both results of the ternary operator are identical.</p>
  <pre class="lang-ts prettyprint-override"><code>type Props&lt;T&gt; = T extends any[] ? PropsBase&lt;T&gt; : PropsBase&lt;T&gt;;
  // same error
  </code></pre>
  <p>Any other props, including ones only listed in <code>ArrayProps</code> are correctly inferred.</p>
  <pre class="lang-ts prettyprint-override"><code>interface ArrayProps&lt;T extends any[]&gt; extends Omit&lt;PropsBase&lt;T&gt;, 'children'&gt; {
    children: (value: ArrayType&lt;T&gt;, index: number, array: T) =&gt; ReactElement;
    arrayOpt: boolean;
  }
  
  const array = [ 1, 2, 3 ];
  const renderedArray =
    &lt;MyComp value={array} arrayOpt&gt;
      {value =&gt; &lt;span&gt;{value}&lt;/span&gt;}
    &lt;/MyComp&gt;;
  </code></pre>
  <p>If I had to guess, this is a bug in tsc.  Meanwhile, is there any way around this?</p>
  <p><a href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDGMA0cDejUYCiANkiEgHbwC+cAZlBCHAORQEwsDcAsAFD9gVJFDrokcAAqMwAZwBCKWUgA8AFQB8ufnDgA3FMQCuSAFxw1vPrrQALYMQAm7CuYAUB42YsBKOAF4tZHQYEjJKGCtqfn4YAE8wCQBBKCgUOLUE1TU4JAAPGEpHWTgUCjiAbQBdLX8LXIKikpS0uJUhOhE4AFUtAH4euHMKJD0RK0FhUXE4FvTpCDl1BsKKYtLy6q181fWAeRBgGBUFuUVldQ1sFjsHZ0oWLRwdOFunF3dPE3M5jKzL7BCRz5YZGEAAIxE2BQqXS5jUfkC+BCYXIVCsuhhrT2YBg5nBEAgpDKURifHiiSkMlklwC9R2TQ2lSqcAGv1ONM0QypiwUSmyGisAHohXAKRIObS6jkGWsSmVmayeWd+bTzBzzgLhaLxcrObU9ZrLtqxVk9ctZesFVs6ezqcayWgIBRZPAALJxADCTDAdItjTlTI0bjwXyQ2De9wocGo6vtmkRTxewDocDcvwAdMBZL8PIYTD4-M9rLo4OwYEYoNGVBocGGMyAUGA3JGXD5qCohYKXtEBCXy5Xq45gHpa63KHmvO3O8PR1EJnwnS74J46XgUOYAIwABhjViXrrLRRESEcdJeKg93vA+nzSH8dcM1A0L10j68AS0KlkYDKtfrKAdkKP5-r2uidlePrdn2B7wFi6R0hUcCbtgABM2AAMxwFU+7OoeLjAuwji-AEF6QTeYYPvBcS0NROIwC+JZvmGn5wN+v4UP+d5ASBnFgWxQrkWAgpAA" rel="nofollow noreferrer">TS Playground</a></p>