جاوااسکریپت - Vue-router با تایپاسکریپت و نگهبان beforeEnter، چگونه از دادههای معتبر استفاده کنیم؟

من از Vue و vue-router همراه با TypeScript استفاده میکنم، یک حالت رایج دارم که یک صفحه واحد برای نمایش یک کامپوننت Photo باشد، من یک مسیر با محافظ beforeEnter دارم که فروشگاه (store) من را بررسی میکند تا ببیند عکس درخواست شده واقعاً وجود دارد یا خیر

    {
        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()
        },
    }

در مثال من، من قبلاً در beforeEnter بررسی میکنم که آیا عکس درخواستی وجود دارد یا نه، حالا اگر همه چیز خوب پیش برود، کاربر وارد کامپوننت میشود.

در کامپوننت خودم دوباره عکس را از فروشگاه با استفاده از خط کد زیر دریافت میکنم

const photo = photoStore.photos.find(p => p.uuid === route.params.id)

حال TypeScript به من خواهد گفت که این عکس ممکن است تعریف نشده باشد، زیرا عملیات find ممکن است نتیجهای بازگرداند که هیچ چیزی پیدا نشود، با این حال ما از مرحلهی محافظت قبلاً میدانیم که این عکس واقعاً پیدا خواهد شد.

const photo = photoStore.photos.find(p => p.uuid === route.params.id)
const uuid = photo!.uuid

من میتوانم از تأیید غیر تهی در تایپاسکریپت استفاده کنم، اما ESLint آن را دوست ندارد و به من اطلاع میدهد: ESLint: تأیید غیر تهی ممنوع.(@typescript-eslint/no-non-null-assertion)

پس من تعجب میکنم، بهترین روش برای مدیریت چنین وضعیتی چیست؟

پاسخ شماره ۱

اگر photo تضمین شده است که وجود دارد، این مورد برای عملگر اطمینان غیر تهی است. میتوان قانون ESLint را موقتاً غیرفعال کرد زیرا در اینجا هدف خوبی ندارد.

اگر photo تضمین شده وجود نداشته باشد، استفاده از عملگر تأکید غیر تهی نادرست است زیرا این میتواند منجر به خطای زمان اجرا شود. این مورد برای محافظ نوع صادق است:

const photo = photoStore.photos.find(p => p.uuid === route.params.id)

if (photo) {
  const uuid = photo.uuid // undefined excluded from photo type
  ...
} else {
  ....
}