Cannot type hint an arguments as two different Array shapes

[whitneyit]

TypeScript Version: Playground

function example(items: Array<Function> | Array<string>) {
    items.forEach(() => {
        // more code
    })  
}

A self-contained demonstration of the problem follows...

When trying to call items.forEach it squawks with the following error

Cannot invoke an expression whose type lacks a call signature.

It's weird because the intellisense suggests the forEach method but just typing items.forEach() is enough to get the compiler to complain.

Expected behavior:
I was expecting the above code to be valid so that I can perform the following code and narrow the type of item.

items.forEach(item => {
    if (typeof item === 'function') {
        // item is a Function
    } else if (typeof item === 'string') {
        // item is a String
    }
}) 

Actual behavior:
The compiler complains on any Array.prototype.* method

[zhengbli]

This comes down to the fact that it is not possible to figure out a common type between Array<Function> and Array<string>. It is definitely not Array<Function | string>, see #10620 (comment):

There is not a meaningful way to describe the general case for merging unmatching signatures; while filter might be arguably safe, push is not. So merging the signatures of (number[]|string[]).push(...) th same proposed for filter would result in push(a: number | string); which means that we are treating the original type as (number | string)[], which is not type safe.

Conclusion is:

So the general case, is there is no common signatures between the two types, and thus the resulting union type does have a filter property but it does not have a signature,

[whitneyit]

Ok that makes sense. That still leaves the bug of having .forEach be suggested and then not be allowed to be called.

Does it make sense to remove the .forEach from the autocomplete and maybe display a different warning to illustrate what is going on?

[mhegazy]

There is a property called forEach on the type, as it does exist on both constituents of the union. it is just that the compiler does not know which signature to use if you want to call it. but you can still use that as a property.

[arciisine]

Looking at the typing, this seems to be the only manner in which I can differentiate the two arrays is by creating a custom guard.

function example(input: string[] | Function[]) {
    let isStrings = (o): o is string[] => typeof o[0] === 'string';

    if (isStrings(input)) {
        input.map(x => x.toUpperCase());
    } else {
        input.map(x => () => x())
    }
}

What I would hope for is something more along the lines of:

function example(input: string[] | Function[]) {
    if (typeof input[0] === 'string') {
        input.map(x => x.toUpperCase());
    } else {
        input.map(x => () => x())
    }
}

These examples are also assuming strict null checks. Otherwise the code would need to handle whether or not the array is defined.

[whitneyit]

@arciisine thanks for your example. I was able to get a working example.

function example(arr: Array<Function> | Array<string>): void {

    if (isFunctionArray(arr)) {
        arr.forEach(item => {
            item.length;
        })
    }

    if (isStringArray(arr)) {
        arr.forEach(item => {
            item.toUpperCase();
        })
    }

}

function isFunctionArray(arr): arr is Array<Function> {
    return Array.isArray(arr) && arr.every(item => typeof item === 'function');
}

function isStringArray(arr): arr is Array<string> {
    return Array.isArray(arr) && arr.every(item => typeof item === 'string');
}