How to solve the error “Array.find() possibly undefined” in TypeScript

The error “Array.find() possibly undefined” in Typescript is related to the find() method. And it is just a simple error to solve. So how to fix it? Let’s go into detail now.

The reason for the error

The error happens when the result from the find() method is not guaranteed and might return an undefined value.

The current element will be called at each loop time of each element, and we can create some conditions to work with that element. If the element passes the condition, it will be returned.

If not any values match the condition, undefined will be set to the value of the find() method.

Example of how the error happens:

const personList = [
  { name: "James", age: 23, id: 0 },
  { name: "Tommy", age: 20, id: 1 },
  { name: "Voca", age: 14, id: 2 },
];

const obj = personList.find((ele) => {
  return ele.id == 1;
});

obj.name = "Thomas"; // The error appears in here
console.log(obj);

Error:

Object is possibly 'undefined'.

Here the error happens because I cannot ensure that the find() method will return a value. And Typescript will return a value to warn me.

The solution for the error “Array.find() possibly undefined” in TypeScript

Create type guard

To solve the error, you can create a simple type guard with an if/else statement and Typescript will feel fine.

Example:

const personList = [
  { name: "James", age: 23, id: 0 },
  { name: "Tommy", age: 20, id: 1 },
  { name: "Voca", age: 14, id: 2 },
];

function executeFind(findId: number) {
  
  // Find object
  const obj = personList.find((ele) => {
    return ele.id == findId;
  });

  // Check the find method succeeded
  if (obj) {
    return obj;
  } else {
    return "Cannot find valid object";
  }
}

console.log(executeFind(1));
console.log(executeFind(3));

Output:

[LOG]: {
  "name": "Tommy",
  "age": 20,
  "id": 1
}
[LOG]: "Cannot find valid object "

Here I create a simple if/else statement to check if the object is found successful only after that will the object be returned. If not, an error message will be returned.

Use the optional chaining( ? )

The optional chaining will allow the value return from the find() method to be undefined. This means we tell Typescript that it found the find() method can not find any elements.

Example:

const personList = [
  { name: "James", age: 23, id: 0 },
  { name: "Tommy", age: 20, id: 1 },
  { name: "Voca", age: 14, id: 2 },
];

// With exist object
const obj1 = personList.find((ele) => {
  return ele.id == 1;
});

console.log(obj1?.name);

// With not exist object
const obj2 = personList.find((ele) => {
  return ele.id == 4;
});

console.log(obj2);

Output:

[LOG]: "Tommy"
[LOG]: undefined

Here when the object is not valid, undefined will be returned.

Summary

In this article, I showed you how to solve the error “Array.find() possibly undefined” in TypeScript. We recommend you always handle your result of the method you are using and always beware of all situations that lead to an error by type guard. Good luck to you!

Maybe you are interested:

• Cannot invoke an object which is possibly ‘undefined’ in TS
• Object is possibly ‘null’ or ‘undefined’ error in ts
• Cannot invoke an object which is possibly ‘undefined’ in TS

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm