(Solved) TypeScript Array.find() possibly ‘undefined’

Errors like “TS2532: Object is possible ‘undefined'” can happen after defining the value of a variable by using the array.find() method. Here are the possible reasons why thearray.find() method returns undefined:

• The predicate parameter or callback function passed to the array.find() doesn’t explicitly use the return keyword to return a truthy value.
• The predicate parameter or callback function never returns a truthy value.

Here is an example of the error described aboved.

interface Car {
  year: number;
  brand: string;
  model: string;
  color: string;
}

type Cars = Car[];

const CARS: Cars = [
  {
    year: 2022,
    brand: 'Ford',
    model: 'Bronco',
    color: "White"
  }, {
    year: 2012,
    brand: "Dodge",
    model: "Challenger",
    color: "Black"
  }, 
  {
    year: 2018,
    brand: "Toyota",
    model: "Prius",
    color: "Silver"
  }
];

const toyota = CARS.find(car => {
  if (car.brand === "Toyota") {
    console.log('Here it is!')
  }

  // ? This callback function never returns a truthy response
});

// ❌ Object is possibly 'undefined'.
console.log('I have a Toyota ', toyota.model);

In the previous example, even though there is a condition that checks if a car is Toyota, the callback function never returns a truthy response after executing the logic on each element of the array.

To fix the error “Object is possibly ‘undefined'”, ensure the callback function returns a truthy response and the predicate defined in the callback function is met at least once with one of the elements of the array.

const toyota = CARS.find(car => {
  // ✅ Callback function uses the 'return' keyword to return response
  // ✅ Predicate will be met as CARS array has at least one "Toyota" car
  return car.brand === "Toyota";
});

console.log('I have a Toyota ', toyota.model);

If after making the above changes, you still see the error “Object is possibly ‘undefined'”,

this is because TypeScript by default defines the returned type of the result as either the type T from an array of type T[] or undefined . It is a safety mechanism as TypeScript cannot predict, even if you have hardcoded array, whether the result from using array.find() will always return a type T .

There are four possible solutions and prevent from getting “Object is possibly ‘undefined’ errors at compile time.

1. Use an if condition to check the value returned from using the array.find() method is not undefined.
2. Use the optional chaining operator (preferred)
3. Explicitly define the type of the result returned from using the array.find() method.
4. Disable type checking for a line (not recommended)

Here are examples of each solution.

// ✅ Explicitly checking the result returned from using the array.find() method
// makes clear a value different than undefined was returned
if (toyota !== undefined) {
  console.log('I have a Toyota ', toyota.model);
}

✅ Using conditional checks to verify the result returned from using the array.find() method is the solution that makes your code more predictable and error free.

// ✅ Using optional chaining operator
console.log('I have a Toyota ', toyota?.model);

Using the optional chaining operator is a common solution used among TypeScript developers. Be aware though that using the optional chaining operator opens the possibility to working with undefined values.

Another option is to explicitly define the result type returned by the array.find() method. In this case, the expected result is an object of type Car.

// ✅ Defining the type "<Car>" of the result returned by the array.find() method
const toyota = <Car>CARS.find(car => {
  return car.brand === "Toyota";
});


console.log('I have a Toyota ', toyota.model);

Note: Explicitly define the result type when you are completely sure the callback passed to the array.find() method will always return a truthy value.

Finally, you could also disable type checking the line where the error “Object is possibly ‘undefined'” is generated by using the // @ts-ignore comment.

// ? Disabling type checking is always an option to get rid of TypeScript
// errors, but I personally don't recommend using it if there are other alternatives.
// @ts-ignore:next-line 
console.log('I have a Toyota ', toyota.model);

Out of the solutions presented, this is the least recommended solution as sometimes you are not only preventing TypeScript from detecting the “Object is possibly ‘undefined'” error, but other syntax errors.