Как решить данную ошибку типизации и почему она возникает?

Question

[DobrykovM]

Использую nuxt 3
У меня есть страница где создается следующая ошибка в случае если по определенному url нет данных

if (!restaurant) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found', data: {redirectTitle: 'Go restaurants', redirectLink: '/restaurants'} })
}

в главном файле ошибок error.vue вот так (описание ошибки на скриншоте)


Поидее поле data есть в указанном типе, но не могу понять на что ругается IDE
Здесь описаны какие типы могут быть
https://nuxt.com/docs/getting-started/error-handli...

Если заменить вот так
const error = useError() as any
то ошибки не будет, но не очень понимаю что нужно импортировать вместо any или возможно как-то по другому это можно решить

Comments

[Алексей Ярков]

<template>
  <div>
    <pre>{{ JSON.stringify(error, null, 2) }}</pre>
    <button @click="handleError">Clear errors</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  error: Object
});

const handleError = () => clearError({ redirect: '/' });
</script>

Попробуйте вывести error и посмотреть что там

[DobrykovM]

Алексей Ярков,
вот такое вывелось

{
  "url": "/restaurants/McDonaldsd",
  "statusCode": 404,
  "statusMessage": "Page Not Found",
  "message": "Page Not Found",
  "stack": "",
  "data": "{\"redirectTitle\":\"Go restaurants\",\"redirectLink\":\"/restaurants\"}"
}

Answer 1

[Дмитрий Беляев]

if (error.value && 'data' in error.value) {
  // ...
}

https://www.typescriptlang.org/docs/handbook/2/nar...

Если кратко, то у error.value тип - юнион, а у юниона можно использовать только свойства, общие для всех вариантов, либо уточнять тип через type guards.

Comments

[DobrykovM]

Большое спасибо за ответ и за ссылку где описана причина, буду изучать

[Дмитрий Беляев]

DobrykovM, добавил еще заметку про юнион, а то не объяснил сначала из-за чего ошибка была