for-of loop with intersection of array types produces a union of element types

TypeScript Version: 3.9.2, 4.0.0-beta

Search Terms: intersection, for-of, union, iterable, iterator, iterate, array

Expected behavior:
When you use a for..of loop to iterate over the elements of an intersection of arrays (or maybe other iterables), what type should the elements be? I would expect either:

• you get the same type as when you index into the array: an intersection of the element types; or
• you get the same type as when you use the iterator method manually: the first element type because the iterator methods are overloads.

Actual behavior:
Iterating over an intersection of arrays with a for..of loop produces a union of their element types for some reason.

Related Issues:
#11961: intersection of array types results in overloaded methods (this would maybe imply overloaded iterators, but that's not happening here)

Aside:
I'm not sure why you'd want an intersection of array types in the first place; but the behavior showed up in a Stack Overflow question and I'm at a loss understanding why we get a union here.

Code

declare const arr: Array<{ a: string }> & Array<{ b: number }>;

for (const elemItr of arr) {
  // { a: string } | {b : number } 😕
  elemItr.a.toUpperCase(); // error!
  elemItr.b.toFixed(); // error!
}

// I expected either this (intersection of element types)
const elemIdx = arr[0]; // { a: string; } & { b: number; }
elemIdx.a.toUpperCase(); // okay
elemIdx.b.toFixed(); // okay

// or this (overloaded iterators giving the first element type only)
const iter = arr[Symbol.iterator];
/* const iter: {
    (): IterableIterator<{ a: string }>;
    (): IterableIterator<{ a: string }>;
} & {
    (): IterableIterator<{ b: number }>;
    (): IterableIterator<{ b: number }>;
} */
const result = arr[Symbol.iterator]().next();
if (!result.done) {
  result.value.a.toUpperCase(); // okay
  result.value.b.toFixed(); // error, expected this 
}

"use strict";
for (const elemItr of arr) {
    // { a: string } | {b : number } 😕
    elemItr.a.toUpperCase(); // error!
    elemItr.b.toFixed(); // error!
}
// I expected either this (intersection of element types)
const elemIdx = arr[0]; // { a: string; } & { b: number; }
elemIdx.a.toUpperCase(); // okay
elemIdx.b.toFixed(); // okay
// or this (overloaded iterators giving the first element type only)
const iter = arr[Symbol.iterator];
/* const iter: {
    (): IterableIterator<{ a: string }>;
    (): IterableIterator<{ a: string }>;
} & {
    (): IterableIterator<{ b: number }>;
    (): IterableIterator<{ b: number }>;
} */
const result = arr[Symbol.iterator]().next();
if (!result.done) {
    result.value.a.toUpperCase(); // okay
    result.value.b.toFixed(); // error, expected this 
}

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "useDefineForClassFields": false,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "downlevelIteration": false,
    "noEmitHelpers": false,
    "noLib": false,
    "noStrictGenericChecks": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "esModuleInterop": true,
    "preserveConstEnums": false,
    "removeComments": false,
    "skipLibCheck": false,
    "checkJs": false,
    "allowJs": false,
    "declaration": true,
    "experimentalDecorators": false,
    "emitDecoratorMetadata": false,
    "target": "ES2017",
    "module": "ESNext"
  }
}

Playground Link: Provided

Start with the provided TypeScript Playground link and reduce the intersection-of-arrays example to compare for-of iteration, indexed access, and an explicit Symbol.iterator call. Determine which element type for-of should produce, then verify the chosen behavior against the reported compiler output and add coverage for the reproducer.