Почему возникает ошибка «Object is possibly 'undefined'» при поиске объекта в массиве и чтении его свойства?

Question

[Петр Сергеев]

Интерфейс recordT

export interface record {
  amount?: number,
  categoryId?: string,
  categoryName?: string,
  date?: string,
  description?: string,
  id?: string,
  type?: string
}

Интерфейс CategoriesInterface

export interface CategoriesInterface {
  limit: number,
  title: string,
  id: string
}

КОД
Ошибка возникает в строке
"categoryName: categories.value.find((c: CategoriesInterface) => c.id === record.categoryId).title,"
При этом без .title на конце все работает, а когда пытаешься получить свойство объекта по ключу title, то ts выдает ошибку, которая звучит так:
Object is possibly 'undefined'.

export default defineComponent({
  setup() {
      const records = ref<recordT[]>([])
      const categories = ref<CategoriesInterface[]>([])

      setuPagination(records.value.map((record: recordT) => {
        return {
          ...record,
          categoryName: categories.value.find((c: CategoriesInterface) => c.id === record.categoryId).title,
          typeClass: record.type === 'income' ? 'green' : 'red',
          typeText: record.type === 'income' ? 'Доход' : 'Расход'
        }
      }))
  }
})

ЕСЛИ заменить так, то тоже все работает и на .title больше не ругается

******
    const categories = ref<any>([])
******

Comments

[WbICHA]

Стоит почитать что возвращает функция .find.

[Петр Сергеев]

WbICHA, спасибо, решил вот таким способом

categories.value.find((c: CategoriesInterface) => c.id === record.categoryId)?.title

Но все равно не совсем понимаю, почему при
const categories = ref<any>([])
не было ошибки.
по сути же получается, что у возвращается undefined.title, но это же и в js не валидно.
или я что-то путаю?

[WbICHA]

Петр Сергеев, наверно потому что эни?

Answer 1

[wonderingpeanut]

Как работает метод find? Находит элемент, если он есть в массиве. Если его нет, возвращает undefined.
Тайпскрипт не знает, есть ли в массиве элемент, который ты ищешь, поэтому подсказывает, что, возможно, ты пытаешься получить свойство title у undefined.

Одно из решений - optional chaining - добавь вопросительный знак перед .title
Другое решение:

...
const category = categories.value.find((c: CategoriesInterface) => c.id === record.categoryId);
...
return {
  ...
  categoryName: category ? category.title : 'default name'
  ...
}

Comments

[Петр Сергеев]

спасибо за объяснение