TS2416：类型“ MyGuard”中的属性“ canActivate”无法分配给基本类型“ CanActivate”中的相同属性

Question

我已经编写了一个有角的4.3.0打字稿库。在构建库时，我在* .d.ts文件中看到以下错误。

[加载程序]中的错误.. \ myLibrary \ lib-commonjs \ my-guard.service.d.ts：13：5 TS2416：类型“ MyGuard”中的属性“ canActivate”无法分配给基本类型中的相同属性'CanActivate'。键入'（下一个：ActivatedRouteSnapshot，状态：RouterStateSnapshot）=>布尔值| 承诺| 观察...'不可分配给类型'（route：ActivatedRouteSnapshot，state：RouterStateSnapshot）=>布尔值| 可观察 Pr ...'。输入'boolean | 承诺| “可观察”不能分配给“布尔值| 可观察 诺言'。类型“可观察”不能分配给类型“布尔| 可观察 诺言'。类型“可观察”不能分配给类型“承诺”。属性“ [Symbol.toStringTag]”

这就是我的后卫的样子

  @Injectable()
    export class MyGuard implements CanActivate {
         canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot):  Observable<boolean> | Promise<boolean> | boolean  {
return true;
        }
    }

我从canActivate删除了返回类型（Observable | Promise | boolean）后，错误消失了。我想了解为什么我需要删除它才能使其正常工作。

 canActivate( next: ActivatedRouteSnapshot ,state: RouterStateSnapshot)  {
    }

错误

Answer 1

您面临的错误是因为您复制的代码与所使用的语言版本不同。

删除返回值后，错误消失了，因为您使该功能与计算机上的版本兼容。

您可以通过导航到CanActivate计算机上的当前版本来检查功能签名。如果使用的是Visual Studio Code，则可以按Ctrl，然后单击它以导航到其文件。

Answer 2

@user911 - 我最近开始学习 Angular，幸运的是遇到了同样的问题。

错误的原因可能是您的 IDE 意外从 'q' 导入了 Promise import {Promise} from 'q'；删除它，您甚至可以声明该方法的返回类型canActivate为Observable< boolean>| Promise< boolean>| boolean。

当您删除方法的返回类型时，导入是您的应用程序正常工作的唯一原因canActivate。

尝试这样做以更好地理解：

1. 确保定义canActivate方法的返回类型，并在定义类型时让 IDE 自动从 q 导入 Promise 或手动导入。

2. 正如我们预期的那样，将会出现错误，现在Promise< boolean>从返回类型中删除，并且错误应该消失，除非您使用canActivate方法返回承诺。