Error with Array type encountered in Typescript's find method

Question

Error with Array type encountered in Typescript's find method

I am encountering an issue with code that looks like this:

type X = {
  test: number;
  x: number;
}[];

type Y = {
  test: number;
  y: number;
}[];

type Z = {
  test: number;
  z: number;
}[];

export const testFunc = (arg: X | Y | Z) => {
  return arg.find((e: (X | Y | Z)[number]) => e.test === 1);
  //         ~~~~
  //      Error 2349
};

When using VSCode, the find method is highlighted with an error message:

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

What could be causing this issue?

Click here for TypeScript Playground code

typescript

Answer 1

Answer №1

TS is searching for a common ground among 3 conflicting signatures - solution.

To resolve this, you can establish a foundational interface with the solution attribute and then extend the types of the entity from the Base interface. This enables the use of generics, allowing you to specify that the solution function accepts any object that extends Base (TS playground):

interface Base {
  solution: number
}

interface A extends Base {
  a: number
}
interface B extends Base {
  b: number
}
interface C extends Base {
  c: number
}

export const solution = <T extends Base>(arg: T[]) => {
  return arg.find((e: T) => e.solution === 1)
}

Answer 2

TS is searching for a common ground among 3 conflicting signatures - solution.

To resolve this, you can establish a foundational interface with the solution attribute and then extend the types of the entity from the Base interface. This enables the use of generics, allowing you to specify that the solution function accepts any object that extends Base (TS playground):

interface Base {
  solution: number
}

interface A extends Base {
  a: number
}
interface B extends Base {
  b: number
}
interface C extends Base {
  c: number
}

export const solution = <T extends Base>(arg: T[]) => {
  return arg.find((e: T) => e.solution === 1)
}

Answer 3

Answer №2

Aside from the signature mismatch, there is a minor error in the code line

return arg.find((e: (A | B | C)[number]) => e.test === 1)

The variable e should not be A|B|C because A,B,C are array types.

I believe you need something like this:

type A = {
  test: number
  a: number
}
type B = {
  test: number
  b: number
}
type C = {
  test: number
  c: number
}

export const test = (arg: (A|B|C)[]) => {
  return arg.find((e: (A | B | C)) => e.test === 1)
}

The issue with the signature arises in the return type of find(). The return type of T[].find() is T|undefined. In this case, it should be (A|B|C)|undefined. Hence, using (A|B|C)[] resolves the problem and sets the return type as (A|B|C)|undefined. Try this on Playground

Answer 4

Aside from the signature mismatch, there is a minor error in the code line

return arg.find((e: (A | B | C)[number]) => e.test === 1)

The variable e should not be A|B|C because A,B,C are array types.

I believe you need something like this:

type A = {
  test: number
  a: number
}
type B = {
  test: number
  b: number
}
type C = {
  test: number
  c: number
}

export const test = (arg: (A|B|C)[]) => {
  return arg.find((e: (A | B | C)) => e.test === 1)
}

The issue with the signature arises in the return type of find(). The return type of T[].find() is T|undefined. In this case, it should be (A|B|C)|undefined. Hence, using (A|B|C)[] resolves the problem and sets the return type as (A|B|C)|undefined. Try this on Playground

Answer 5

Answer №3

To enhance the representation of object members within arrays, adjust your types accordingly. By refining the function signature to specify that the argument is an array containing a union of all object types, TypeScript will effortlessly deduce that the test property is shared among all types in the union:

TS Playground

type A = {
  test: number;
  a: number;
};

type B = {
  test: number;
  b: number;
};

type C = {
  test: number;
  c: number;
};

export const test = (array: (A | B | C)[]) => {
  return array.find(element => element.test === 1);
};

Answer 6

To enhance the representation of object members within arrays, adjust your types accordingly. By refining the function signature to specify that the argument is an array containing a union of all object types, TypeScript will effortlessly deduce that the test property is shared among all types in the union:

TS Playground

type A = {
  test: number;
  a: number;
};

type B = {
  test: number;
  b: number;
};

type C = {
  test: number;
  c: number;
};

export const test = (array: (A | B | C)[]) => {
  return array.find(element => element.test === 1);
};

Error with Array type encountered in Typescript's find method

Answer №1

Answer №2

Answer №3

Similar questions

In AngularJS, the use of the '+' operator is causing concatenation instead of addition

"Exploring Angular 9: A guide to retrieving form data with an array of objects [Revised as of July 29th, 2020

TypeScript raises an issue with a Vue component property that has been defined using vue-property-decorator

Issue Arising from Printing a Custom Instruction in a Schema Generated Document

Using prevState in setState is not allowed by TypeScript

Angular2 and Typescript paired with Visual Studio 2013

Tips for resolving the TypeScript error related to the global object in Node.js

The error message "Uncaught ReferenceError: exports is not defined and require" indicates that

Ways to expand the width of mat-dialog-actions component in Angular 8

The modal popup will be triggered by various button clicks, each displaying slightly different data within the popup

Encountered a PrismaClientValidationError in NextJS 13 when making a request

How can TypeScript be used to update the values and text of an HTML element?

Error in TypeScript - Anticipated 1-2 arguments, received either none or multiple. Code Issue TS2556

Guide to accessing and modifying attributes of Ionic components in TypeScript file

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

What could be causing the table to display empty when we are passing data to the usetable function?

Error encountered when attempting to utilize Path Aliases in Angular 11.tsconfig

I am encountering a problem with my Material UI react-swipeable-views while using TypeScript

Expressjs - Error: Headers already sent to the client and cannot be set

Executing functions in Vue TypeScript during initialization, creation, or mounting stages