typescript - 如何指定在 TypeScript 中定义为对象文字的箭头函数的类型？

Question

我有以下对象:

  let route = {
    path: "/login",
    name: "login",
    component: Login,
    beforeEnter: (to, from, next) => {
      if (store.state.system.loggedIn) {
        next("/");
      } else {
        next();
      }
    },
  }

这为 Vue Router 指定了一个路由对象。问题出在函数 beforeEnter 上，因为我收到 TS7006 错误 - 所有参数都隐式具有 any类型。

我可以手动指定参数类型，但已经存在确切类型 beforeEnter函数应该适合 - 它叫做 NavigationGuard , 我可以从 vue-router 导入它就好了。

当我尝试指定它时，问题就来了，我似乎找不到正确的语法。我发现问题“Type definition in object literal in TypeScript”，其中的答案建议指定整个对象的类型，或者像这样转换它:{ hasStarted: <boolean> null, ... }但将定义替换为

let route = {
    path: "/login",
    name: "login",
    component: Login,
    beforeEnter: <NavigationGuard> (to, from, next) => {
      if (store.state.system.loggedIn) {
        next("/");
      } else {
        next();
      }
    },
  }

似乎无法安抚编译器。

怎么办？

Answer 1

为了避免与generics混淆，你需要括号:

<NavigationGuard>((to, from, next) => {
  // …
})

或者:

((to, from, next) => {
  // …
}) as NavigationGuard

但是你应该能够在父对象上使用类型:

let route: RouteConfig = {
  path: "/login",
  name: "login",
  component: Login,
  beforeEnter: (to, from, next) => {
    if (store.state.system.loggedIn) {
      next("/");
    } else {
      next();
    }
  },
}