title: Strange Result of TypeScript `extends` Operator (Testing Types Assignability)
body: <p>I'm playing around with <a href="https://2ality.com/2020/06/computing-with-types.html#conditional-types" rel="nofollow noreferrer">https://2ality.com/2020/06/computing-with-types.html#conditional-types</a> to learn the type relationships in TypeScript.</p>
  <p>Having defined the type function <code>IsAssignableTo</code>:</p>
  <pre class="lang-js prettyprint-override"><code>type IsAssignableTo&lt;A, B&gt; = A extends B ? true : false
  </code></pre>
  <p>I got the desired results like:</p>
  <pre class="lang-js prettyprint-override"><code>type MyGoodType1 = IsAssignableTo&lt;42, Object&gt;           // MyGoodType1 === true
  type MyGoodType2 = IsAssignableTo&lt;42, object&gt;           // MyGoodType2 === false
  type MyGoodType3 = IsAssignableTo&lt;'foo', 'foo'|'bar'&gt;   // MyGoodType3 === true
  </code></pre>
  <p>However, the result of reversing the parameters of the last expression:</p>
  <pre class="lang-js prettyprint-override"><code>type MyStrangeType = IsAssignableTo&lt;'foo'|'bar', 'foo'&gt; // MyStrangeType === boolean ???
  </code></pre>
  <p>is, to my surprise, neither literal <code>true</code> nor literal <code>false</code> (expecting it to be <code>false</code>), but a <code>boolean</code>?</p>
  <p>My Questions are</p>
  <ol>
  <li>How assignability for union types works in TS?  I've read <a href="https://github.com/microsoft/TypeScript/blob/main/doc/spec-ARCHIVED.md#3114-assignment-compatibility" rel="nofollow noreferrer">SPEC's Assignment Compatibility</a> and got no luck.</li>
  <li>How could the result of <code>T1 extends T2 ? A : B</code> become a union of <code>A</code> and <code>B</code>?</li>
  </ol>
  <p><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAkgzgQTnAlgcwHYEMBGAbCAFQHsAeBAGigCEA%20KAXigSggA9gIMATOGqAPxRgAJwCu0AFxQAZljxwIAWABQq0JCgBZEAHFixboXAQAjI1iJk6bPiJkALACYqAeRwArCAGNg9KAGBQQD0wdp6BkYm5gyxwuLKKhrQOvqGxpBOFvBIqJi4BCSkzlTEnj5%20QVUBoeFpUZmMcXIKicl1kRkQAMzZVnm2hWQA5DIGw1Sj4wA%20wzhYIsP%20ULWpnSa9sUyiEqrqJuEAyqJYGGhEB0w51vl2RVPEw7Pzi5Njj-SrIMcip%20ddTSYOAMBFOggEAlUQA" rel="nofollow noreferrer">Complete Code in Playground</a></p>