TS2416：“MyGuard”类型中的属性“canActivate”不可分配给基类型“CanActivate”中的相同属性答案

【问题标题】：TS2416: Property 'canActivate' in type 'MyGuard' is not assignable to the same property in base type 'CanActivate'TS2416：“MyGuard”类型中的属性“canActivate”不可分配给基类型“CanActivate”中的相同属性
【发布时间】：2018-08-25 22:51:33
【问题描述】：

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

[at-loader] 中的错误 ..\myLibrary\lib-commonjs\my-guard.service.d.ts:13:5 TS2416：“MyGuard”类型中的属性“canActivate”不可分配给基本类型“CanActivate”中的相同属性。输入'（下一个：ActivatedRouteSnapshot，状态：RouterStateSnapshot）=>布尔|承诺 |观察...' 不可分配给类型 '(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => boolean |可观察 |公...'。输入'布尔|承诺 | Observable' 不可分配给类型 'boolean |可观察 |承诺'。类型 'Observable' 不可分配给类型 'boolean |可观察 |承诺'。类型“Observable”不可分配给类型“Promise”。 “Observable”类型中缺少属性“[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)  {
    }

错误

【问题讨论】：

如果您删除它，TypeScript 将根据您的返回语句推断返回类型。我假设您要返回这三种类型中的一种，因此返回类型将是与接口的返回签名匹配的单一类型。
您使用的是哪个版本的打字稿？我刚刚尝试使用 v 2.5.3 并且它可以正常工作（虽然在 angular 5 上，但界面从那时起就没有卡住）
@David - 我使用的是 typescript 2.7.2 版
你是否在主模块，部分提供者中添加你的后卫？它解决了我的问题

标签： angular typescript angular2-routing

【解决方案1】：

为我解决的问题是 import 不匹配问题。

我创建了一个接口并在一个类中实现了它。
在类中我导入了正确的模块，但我在接口声明中没有这样做。
这导致编译器对我大喊大叫，我花了一些时间才意识到这是因为导入，打字稿编译器没有提到它。

【讨论】：

【解决方案2】：

将此(: Observable<boolean> | Promise<boolean> | boolean ) 更改为:any 绝对适合您

【讨论】：

【解决方案3】：

问题在于返回的类型。这对我有用：

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | 
boolean | UrlTree {

}

【讨论】：

请在您的代码中添加一些解释 - 它的作用是什么，为什么它可以解决问题？

【解决方案4】：

对我来说，我输入了返回类型 Observable< Boolean> | Promise< Boolean> | Boolean 而不是 Observable< boolean> | Promise< boolean> | boolean。当我更换它时。

【讨论】：

这个答案是错误的。 Boolean 和 boolean 是不同的类型。 true 是一个布尔值。

【解决方案5】：

您面临的错误是因为您复制的代码与您正在使用的 Angular 版本不同。

当您删除返回值时错误消失了，因为您使函数与您机器上的版本兼容。

您可以通过在您的机器上导航到CanActivate 来检查当前版本的函数签名。如果您使用的是 Visual Studio Code，则可以按 Ctrl 并单击它以导航到其文件。

【讨论】：

您可能需要将 rxjs 和 @angular/whatever 添加到 peerDependencies 以确保消除您的答案正确推断的原因。
或者右键单击导入语句中的“CanActivate”，然后单击“Go to Definition”。在我的返回值定义为: Observable<boolean> | Promise<boolean> | boolean
我尝试将相同的版本添加到 peerDependencies，确保所有 package.json 中的版本相同，并尽可能对整个 @angular 文件夹进行并排比较，删除整个node_modules 文件夹，升级打字稿并重新启动计算机。这种令人沮丧的消息仍然存在。唯一有效的方法是复制一个不存在错误的相同项目并从头开始。无论是什么触发了这一切都被埋没了。

【解决方案6】：

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

错误的原因可能是你的IDE不小心从'q'import {Promise} from 'q'导入了Promise；删除它，您甚至可以声明canActivate 方法的返回类型，即Observable< boolean> | Promise< boolean> | boolean.

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

试试这个以获得更好的理解：

确保定义canActivate 方法的返回类型，并在定义类型时让IDE 自动从q 导入Promise 或手动导入。
正如我们预期的那样，会出现错误，现在从返回类型中删除 Promise< boolean>，除非您使用 canActivate 方法返回承诺，否则错误应该会消失。

【讨论】：

canActivate():any { ... 为我做的
@daniel 错了。它将允许您纠正完全不正确的代码并绕过任何检查。