Arguments (route, from, next) types within route guard vue3

Question

I export a function, which I pass to router.beforeEach:

export default function (route, from, next) {
  log.debug(route.path)

  if (!identity.state.authenticated) {
    log.debug('redirecting to "login" view...')
    next({ name: 'login' })
  } else {
    next()
  }
}

But this causes 3 TypeScript errors:

TS7006: Parameter 'route' implicitly has an 'any' type.
TS7006: Parameter 'from' implicitly has an 'any' type.
TS7006: Parameter 'next' implicitly has an 'any' type.

What types would be best for those? I can make them just objects, but aren't there some types to import from vue?

Answer 1

router.beforeEach is typed as:

beforeEach(guard: NavigationGuardWithThis<undefined>): () => void

and NavigationGuardWithThis is typed as:

export interface NavigationGuardWithThis<T> {
  (
    this: T,
    to: RouteLocationNormalized,
    from: RouteLocationNormalized,
    next: NavigationGuardNext
  ): NavigationGuardReturn | Promise<NavigationGuardReturn>
}

So you need these types to import from vue-router:

• RouteLocationNormalized

• NavigationGuardNext

• I'm not sure how how to import NavigationGuardReturn, but since it includes void, omitting the return is also acceptable in TypeScript.

import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'

export default function(
  to: RouteLocationNormalized,
  from: RouteLocationNormalized,
  next: NavigationGuardNext
) {
  /*...*/
}