.every() .find() .filter() methods fail with "This expression is not callable." error on union of array types

[ialexryan]

Bug Report

🔎 Search Terms

• This expression is not callable
• none of those signatures are compatible with each other

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about union types. I also reviewed previous related issues.

⏯ Playground Link

• .every() does not work
• .filter() does not work
• .find() does not work
• .reduce() also doesn't work, but there is already an issue for that one. (Perhaps we should merge it into this?)

💻 Code

interface Fizz {
    id: number;
    fizz: string;
}

interface Buzz {
    id: number;
    buzz: string;
}

([] as Fizz[] | Buzz[]).filter(item => item.id < 5); 

🙁 Actual behavior

Compilation fails with the following error:

This expression is not callable.
  Each member of the union type '{ <S extends Fizz>(predicate: (value: Fizz, index: number, array: Fizz[]) => value is S, thisArg?: any): S[]; (predicate: (value: Fizz, index: number, array: Fizz[]) => unknown, thisArg?: any): Fizz[]; } | { ...; }' has signatures, but none of those signatures are compatible with each other.

🙂 Expected behavior

Compilation succeeds, as it does for map and several other array functions.

🔖 Useful links

• Original issue
• PR that closed original issue

[DanielRosenwasser]

Duplicate of #36390

https://github.com/microsoft/TypeScript/issues?q=is%3Aissue+is%3Aopen+array+%22This+expression+is+not+callable%22

[ialexryan]

Hi @DanielRosenwasser, please check out my comment on that issue (also linked in the writeup above). This issue is a followup to #36390, not a duplicate. That issue was closed when #31023 fixed the majority of array functions to work with unions of array types. This issue (and #44063) track the handful of array functions which still don't work post-#31023.

If you'd rather reopen #36390 and rewrite the title and description I suppose we could dedupe this in, but given that there was so much activity there dating back years, and that most of the usecases motivating that issue have in fact been solved for, it seemed much clearer to me to track the remaining bits of cleanup separately here.

[RyanCavanaugh]

@weswigham what's the current state of what we might be able to do here?

[weswigham]

Well, we'd need to come up with sensible rules for merging overload lists. Conceptually, we could (attempt to) make a list of 4 overloads by combining each of the input signatures, except there's no inherent ordering to those 4 signatures, unlike a normal overload set, so it's unclear how we'd choose which signature to resolve against, ultimately.

[jfamousket]

As a workaround for anyone searching lodash's filter function works as expected

[ITenthusiasm]

@weswigham Is there anything in particular that makes methods like filter difficult to work with compared to map? I haven't looked at the type definition in TS. But from a JS standpoint, the two signatures are the same; so it's a bit surprising that the methods involving predicates are more complex.

[jcalz]

Maybe something could be done specifically for arrays instead of worrying about merging arbitrary signatures? Like, widen A[] | B[] to readonly (A | B)[] for these failing method calls? 🤷‍♂️

[dderjoel]

Can we add concat to that list above, too?
I have a typescript-playground showing this here.

const m2 = [] as Array<number> | Array<string>;
m2.map(it=>it); // why does that work ?
m2.reduce((it) => it); // error
m2.concat(m2); // error

[vassudanagunta]

• .reduce() also doesn't work, but there is already an issue for that one. (Perhaps we should merge it into this?)

I think it should be merged; if not then its description "Array.reduce doesn't work" needs to be improved. See 44063.

[ericblade]

Probably known, but also affects:

const arr = [] as Array<number> | Uint8Array;
arr.reduce(...)

[Buslowicz]

Hey @DanielRosenwasser, any estimates when could that be fixed?

[gaberogan]

For anyone looking for an easy workaround:

interface Fizz {
    id: number;
    fizz: string;
}

interface Buzz {
    id: number;
    buzz: string;
}

const arr: Fizz[] | Buzz[] = [];

arr.filter(item => item.id < 5); // This is an error

const arrFixed: Array<typeof arr[number]> = arr; // This is the fix

arrFixed.filter(item => item.id < 5); // This works!

It's not exactly equivalent but should work for most cases. Hope this helps!

[bmiakoun]

@gaberogan this just makes arrFixed type to any

[ericbf]

@bmiakoun

@gaberogan this just makes arrFixed type to any

Why would that result in any?

declare const a: string[] | number[]

// Error. Should work and result in `string[] | number[]`
const b = a.filter((_i /* type is `any` */) => true)

// Works, but wrong type. `c` is (string | number)[]
const c = (a as typeof a[number][]).filter((_i /* type is `string | number` */) => true)

// Works but has two typecasts. Cumbersome.
const d = (a as typeof a[number][]).filter((_i /* type is `string | number` */) => true) as typeof a

Playground link

[RyanCavanaugh]

@weswigham let's take another bite at the apple

[Emmahchinonso]

Hello @weswigham, please has this issue been resolved?

[ericbf]

@Emmahchinonso you can see a few lines above your comment is a linked pull request that will close the issue. This issue is still open, meaning it is still open, but you can subscribe to notifications if you want.

[gegxen]

will this also gonna work after this is merged?

const arr: string[] | number[] = [];
const val: string | number = 5;
const index = arr.indexOf(val);

[mon-jai]

@gegxen Doesn't seem to work.

https://www.staging-typescript.org/play?ts=5.1.0-pr-53489-26#code/MYewdgzgLgBAhgJwQLhtBBLMBzA2gXRgB8YwBXAWwCMBTBAmAXhgIG4AoUSWANzgBtU6LNmKlKtBExgBWDl2gwsAExoAPaYgQA6FeoDyAMwAUffgEoOQA

[gegxen]

@mon-jai the PR is not merged yet

[ericbf]

@gegxen why don’t you clone the commit in the linked PR and try it?

[kkumawat333]

Copying snippet from @gaberogan

It's better to union the type before typing it as Array.

interface Fizz {
    id: number;
    fizz: string;
}

interface Buzz {
    id: number;
    buzz: string;
}

TFizzBuzz = Fizz | Buzz
const arr: TFizzBuzz[] = [];

arr.filter(item => item.id < 5); // This works for me

[joealden]

@kkumawat333 this isn't a problem anymore as of 5.2

[gaberogan]

@ericbf No it seems fine to me, arrFixed is not any

[ericbf]

@ericbf No it seems fine to me, arrFixed is not any

Exactly my point—I stated that arrFixed in the example was not any, contrary to @bmiakoun's comment above. Anyways, this issue is closed now—if you find something that needs to be discussed or fixed, probably open a new issue for that.

[Jv7680]

For anyone looking for an easy workaround:

interface Fizz {
    id: number;
    fizz: string;
}

interface Buzz {
    id: number;
    buzz: string;
}

const arr: Fizz[] | Buzz[] = [];

arr.filter(item => item.id < 5); // This is an error

const arrFixed: Array<typeof arr[number]> = arr; // This is the fix

arrFixed.filter(item => item.id < 5); // This works!

It's not exactly equivalent but should work for most cases. Hope this helps!

Or just do a simple change like this:
_ Use this: const arr: (Fizz | Buzz)[] = [];
_ Instead of this: const arr: Fizz[] | Buzz[] = [];

[ericbf]

Hello @Jv7680, this issue has been closed for a while now.

But, for the record, the problem with that suggestion is that the type would not actually be correct. But that's been discussed already further up in the thread.