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

Implementing reduce for filtering and mapping in TypeScript: A comprehensive guide

"Encountering an undefined Angular object after making an HTTP request

angular2 fullCalendar height based on parent element

Ways to resolve the issue of 'message' property lacking an initializer in TypeScript without suppressing errors

Exploring the attributes of a record through a combination of string template types

What is the method for extracting the types of parameters from a function type while excluding a single parameter?

Filtering nested arrays in Javascript involves iterating through each nested

Expanding interfaces dynamically in Typescript

Simplified Method for Verifying Null and Undefined in Typescript

Type-constrained generic key access for enhanced security

Navigating resolvedUrl with getServerSideProps in the newest version of NextJS - a comprehensive guide

Delete an entry in a singular mapping in a one-to-one connection [TypeORM]

Create a global variable by importing an external module in TypeScript

What is the best way to specify parameter names and types for a TypeScript function that can take either one or two arguments?

Master your code with Rxjs optimization

Utilizing web components in React by solely relying on a CDN for integration

When running on localhost, IE11 only shows a white screen while the other browsers function properly

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

Incorporating a custom transpiled file format into Typescript imports

typescript set x and y values to specific coordinates