declaration of beforeRouteEnter(to,from,next) hook should be updated

Version

3.0.1

Reproduction link

https://jsfiddle.net/doommm/50wL7mdz/74369/

Steps to reproduce

• Vue 2.5.3
• Vue-class-component 6.1.0
• Typescript 2.6.1
• vscode 1.17.2, vetur 0.11.0

I found that in declaration file(types/router.d.ts), there’s a type named NavigationGuard used for beforeRouteEnter and other two hooks. The function declaration of next is ((vm: Vue) => any) | void) => void, and should it be updated so we could access all members declared in class(or object)? I wrote three examples to explain my confusion.

1. In .vue file with object literal style, i cant access my own properties.
2. In .vue file with vue-class-component, if i add an type identifier manually, it works. no error. if not, error.
3. In separate .ts file with vue-class-component, whether i add identifier or not, got error. But if i roll back to typescript 2.5.3, and add type identifier, it works.

I think the declaration should be updated(Generics? T extends Vue or ?), but i’m not sure about that. Sorry for my poor english If I dont describe the problem clearly.

What is expected?

all class(object) members should be accessed in vm.propertyName

What is actually happening?

We could only access members of Vue.

[doommm]

Consider this example. Blog is used to be only accessible via List component, so you annotate next as (vm: List) => any. Later, we add Blog links in Author’s page. next typing is wrong then!

I’m still confused. There must be something i misunderstood or even never know.

I’m focusing on the In-Component guards beforeRouteEnter(to,from,next), and they(In-Component guards) should be tightly coupled with the component(or should be reusable?).

So for the example you posted, do you mean to define beforeRouteEnter in Blog? Shouldn’t it become (vm: Blog) => any?

// Component List
@Component<List>({
  beforeRouteEnter(to, from, next) {
    next((vm: List) => {
      vm.blog; // accessible
    });
  },
})
class List extends Vue {
  blog: any;
}

// Component Author
@Component<Author>({
  beforeRouteEnter(to, from, next) {
    next((vm: Author) => {
      vm.blog;// accessible
    });
  },
})
class Author extends Vue {
  blog: any;
}

// Component Blog
@Component<Blog>({
  beforeRouteEnter(to, from, next) {
    next((vm: Blog) => {
      vm.p;// accessible
    });
  },
})
class Blog extends Vue {
  p: any;
}

[tinobino]

@websmurf, @webrsb Please try this:

import { ComponentPublicInstance, defineComponent, ref } from 'vue'
import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'

type CustomNameParamProvider = {
  customNameParam: string
} & ComponentPublicInstance

function isCustomNameParamProvider (vm: ComponentPublicInstance): vm is CustomNameParamProvider {
  return (vm as CustomNameParamProvider).customNameParam !== undefined
}

export default defineComponent({
  beforeRouteEnter: (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
    next(vm => {
      if (isCustomNameParamProvider(vm) && typeof from.name === 'string') {
        vm.customNameParam = from.name
      }
    })
  },
  setup () {
    const customNameParam = ref('')
    return {
      customNameParam
    }
  }
})

This is using an “user-defined type guard” for narrowing.