Object is possibly 'undefined'. TS2532 /

Issue

Answered

So I`m importing 2 arrays of objects from folder api , then I create variable List where each object - todosFromServer - contains sub object - usersFromServer - . Here is interface of combined List object

export interface List {
  id: number;
  title: string;
  completed: boolean;
  userId: number;
  user: {
    id: number;
    name: string;
    username: string;
    email: string;
  };
}

Here is example from usersFromServer object

{
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz',
},

Here is example from todosFromServer

  {
    id: 1,
    title: 'delectus aut autem',
    completed: true,
    userId: 1,
  },

I created function handleSubmit() for form submits, where after some primitive validation in IF() statement I create new Object newUser with type List and then I mutate list array of objects adding newUser.

QUESTUIN PART But , terminal , on property userId writes that Object is possibly 'undefined'. I tried inside interface to set userId?: number | undefined; but it doen`t change anything , plus I know that it will never be undefined as result of find method.

import { useState } from 'react';
import './App.scss';

import usersFromServer from './api/users';
import todosFromServer from './api/todos';
import { List } from './type/List';

import { TodoList } from './components/TodoList/TodoList';

let list: List[] = [...todosFromServer].map(todo => {
  const user = [...usersFromServer].find(person => person.id === todo.userId);

  return { ...todo, user };
});

export const App:React.FC = () => {
  const [title, setTitle] = useState<string>('');
  const [user, setUser] = useState<string>('Please choose a user');
  const [errorUser, setErrorUser] = useState<boolean>(false);
  const [errorTitle, setErrorTitle] = useState<boolean>(false);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>):void => {
    e.preventDefault();
    const sortedArray = [...list].sort((a, b) => a.id - b.id);
    const id = sortedArray[sortedArray.length - 1].id + 1;

    if (title === '' || user === 'Please choose a user') {
      if (title === '') {
        setErrorTitle(true);
      }

      if (user === 'Please choose a user') {
        setErrorUser(true);
      }

      return;
    }

    const newUser: List = {
      id,
      title,
      completed: false,
      user: usersFromServer
        .find(person => person.name === user),
      userId: usersFromServer
        .find(person => person.name === user).id,
    };

    list = [...list, newUser];

    setTitle('');
    setUser('Please choose a user');
  };

Will be glad for any explanation of what I`m doing wrong.

problem is inside handleSubmit() when I define and assign newUser object, here is condensed version of function

const handleSubmit = (e: React.FormEvent<HTMLFormElement>):void => {
    e.preventDefault();
    const sortedArray = [...list].sort((a, b) => a.id - b.id);
    const id = sortedArray[sortedArray.length - 1].id + 1;

    const newUser: List = {
      id,
      title,
      completed: false,
      user: usersFromServer
        .find(person => person.name === user),
      userId: usersFromServer
        .find(person => person.name === user).id,
    };

    list = [...list, newUser];
  };

Solution

You get this error on the access to .id when you set userId for newUser in handleSubmit, this access will fail when there is no match. In order to account for this you can use optional chaining (?.)

So the lookup would look like this: usersFromServer.find(person => person.name === user)?.id

You would need to set both the user and userId property to support the optional value undefined in order to avoid TypeScript errors as well.

Answered By - kristype