Estoy usando Vue y vue-router con mecanografiado, tengo un caso común de una sola página para que se muestre un componente de foto, tengo una ruta con un protector beforeEnter que consulta mi tienda para ver si la foto solicitada realmente existe
{ name: 'photo', path: '/photos/:id', meta: {requiresAuth: true}, component: () => import('@/pages/Photo.vue'), beforeEnter: (to, from, next) => { const photos = usePhotos(); const requestedPhoto = photos.$state.photos.findIndex(p => p.uuid === to.params.id) return requestedPhoto === -1 ? next({name: 'home'}) : next() }, }En mi ejemplo, ya estoy revisando en el beforeEnter si existe la foto solicitada, ahora si todo va bien, el usuario llega dentro del componente.
En mi componente, vuelvo a buscar la foto de la tienda usando la siguiente línea de código
const photo = photoStore.photos.find(p => p.uuid === route.params.id)Ahora TS me informará que esta foto podría no estar definida, ya que la operación de búsqueda podría no arrojar resultados, sin embargo, ya sabemos por el paso de guardia que esta foto sí se encontrará.
const photo = photoStore.photos.find(p => p.uuid === route.params.id) const uuid = photo!.uuid Podría usar la afirmación no nula de Typescript, pero a ESLint no le gusta eso, me lo hace saber: ESLint: Forbidden non-null assertion.(@typescript-eslint/no-non-null-assertion)
Entonces me pregunto, ¿cuál es la mejor práctica para manejar una situación como esta?
Si se garantiza que la photo existe, este es el caso del operador de aserción no nulo. La regla ESLint se puede deshabilitar temporalmente porque no tiene un buen propósito aquí.
Si no se garantiza que la photo exista, es incorrecto usar un operador de aserción no nulo porque esto puede generar un error de tiempo de ejecución. Este es el caso de type guard:
const photo = photoStore.photos.find(p => p.uuid === route.params.id) if (photo) { const uuid = photo.uuid // undefined excluded from photo type ... } else { .... }