Using a union of arrays breaks array methods

[eamodio]

TypeScript Version: 2.1.4

Code

abstract class ChildBase {
    id: string;
}

class ChildA extends ChildBase {
    foo: string;
}

class ParentA {
    children: ChildA[];
}

class ChildB extends ChildBase {
    bar: string;
}

class ParentB {
    children: ChildB[];
}

function findChild(parent: ParentA | ParentB, id: string) {
    return parent.children.findIndex(_ => _.id === id); // Compile error here
}

// Note that the following works (but it changes the meaning of the array)
function findChild2(parent: ParentA | ParentB, id: string) {
    return (<(ChildA|ChildB)[]>parent.children).findIndex(_ => _.id === id);
}

Expected behavior:

Compiles without error

Actual behavior:

Compiles with error:

Cannot invoke an expression whose type lacks a call signature. Type '((predicate: (value: ChildA, index: number, obj: ChildA[]) => boolean, thisArg?: any) => number) ...' has no compatible call signatures.

[aluanhaddad]

It seems like this is what you want

function findChild(parent: { children: ChildBase[] }, id: string) {
    return parent.children.findIndex(_ => _.id === id);
}

or, more likely

abstract class ChildBase {
    id: string;
}

abstract class ParentBase {
    children: ChildBase[];
}

class ChildA extends ChildBase {
    foo: string;
}

class ParentA extends ParentBase {
    children: ChildA[];
}

class ChildB extends ChildBase {
    bar: string;
}

class ParentB extends ParentBase {
    children: ChildB[];
}

function findChild(parent: ParentBase, id: string) {
    return parent.children.findIndex(_ => _.id === id);
}

[eamodio]

@aluanhaddad thanks for you reply and appreciate those workarounds. I posted above because I feel that there is a bug here. Also this issue exists without any inheritance, which makes both of your workaround less appealing.

For example, this exhibits the same behavior:

class ChildA {
    id: string;
    foo: string;
}

class ParentA {
    children: ChildA[];
}

class ChildB {
    id: string;
    bar: string;
}

class ParentB {
    children: ChildB[];
}

function findChild(parent: ParentA | ParentB, id: string) {
    return parent.children.findIndex(_ => _.id === id);
}

It seems to be caused by the type definition:

findIndex(predicate: (value: T, index: number, obj: Array<T>) => boolean, thisArg?: any): number;

Since T comes in as a union of 2 (or more) arrays.

[mhegazy]

Please see #10620 for details.