带有 Typescript 和 beforeEnter 防护的 Vue-router，如何使用经过验证的数据？

Question

我正在使用 Vue 和 vue-router 与打字稿，我有一个常见的情况是显示照片组件的单个页面，我有一个带有

beforeEnter

守卫的路线，它查询我的商店以查看是否请求的照片确实存在

    {
        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)

现在 TS 会让我知道这张照片可能是未定义的，因为查找操作可能不会返回任何结果，但是我们已经从保护步骤知道这张照片确实会被找到。

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

我可以使用 Typescript 中的非空断言，但 ESLint 不喜欢这样，它是 让我知道：

ESLint: Forbidden non-null assertion.(@typescript-eslint/no-non-null-assertion)

所以我想知道，处理这种情况的最佳做法是什么？

Answer 1

如果保证存在

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 {
  ....
}