Auto Type narrowing for array union type when the first element type is determined

[maple5233]

Suggestion

🔍 Search Terms

is:issue union type array guard first element

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

If we have a union type array like declare const array: string[] | number[], and the first element type is determined in a branch, we should be able to narrow the array type to string[] or number[].
(Of course we can now use custom type guards for our purposes, but it would be exciting if this were all automated.)

📃 Motivating Example

playground

// ts version: 4.6.4

// case 1
declare const array: string[] | number[]
function doSomething() {
  if (typeof array[0] === 'string') {
      const firstElement = array[0] // When the mouse hovers over the variable, you can see that the ts engine correctly infers the type, which is 'string'
      type firstElementType = typeof array[0] // should be 'string' (currently it is 'string | number')
      type arrayType = typeof array // should be 'string[]' (currently it is 'string[] | number[]')
  }
}

// case 2
interface A { foo: number }
interface B { bar: number }
declare const array2: A[] | B[]
function doSomething2() {
  if ('foo' in array2[0]) {
    const firstElement = array2[0] // When the mouse hovers over the variable, you can see that the ts engine correctly infers the type, which is 'A'
    type firstElementType = typeof array2[0] // should be 'A' (currently it is 'A | B')
    type arrayType = typeof array2 // should be 'A[]' (currently it is 'A[] | B[]')
  }
}

// No longer need to write a custom type guard as a helper function like this:
function boringButNeededHelperGuard(array: string[] | number[]): array is string[] {
  return typeof array[0] === 'string'
}

💻 Use Cases

Save time writing custom type guards, and code reading experience will be better

[MartinJohns]

This sounds like a duplicate of #45301 to me, which was marked as a duplicate of #42384.

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.