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

Posted 2023-02-22

【中文标题】如何在 TypeScript 中指定定义为对象文字的箭头函数的类型？

【英文标题】：How to specify type of an arrow function defined as an object literal in TypeScript?

【发布时间】：2019-10-06 20:26:08

【问题描述】：

我有以下对象：

  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();
      
    ,
  

似乎无法安抚编译器。

怎么办？

【参考方案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();
    
  ,