升级TypeScript后,Angular控制器注册现在无法编译

Question

我们使用的是TypeScript 2.2.升级到2.4之后,我们现在在编译时得到这个:

错误TS2345:类型'typeof TopMenuController'的参数不能分配给'Injectable <IControllerConstructor>'类型的参数.类型'typeof TopMenuController'不能赋值为'(string |(new(... args:any [])=> IController)|((... args:any [])=> void | IController))[ ]".类型'typeof TopMenuController'中缺少属性'push'.

ts\controllers\TopMenuController.ts(2,18):错误TS2559:类型'TopMenuController'没有与'IController'类型相同的属性.

我不明白第一个错误和谷歌搜索它是困难的.我只是要求第一个错误的帮助.(由于我试图解决第一个错误,我得到了第二个错误).这是控制器:

export class TopMenuController implements angular.IController {
    static $inject = ["$templateCache", "Restangular"];

    constructor(
        private readonly $templateCache: angular.ITemplateCacheService,
        private readonly restangular: Restangular.IElement) {
    }
}

这就是它的注册方式.

angular.module("ngApp")
    .config(Configuration.TemplateCacheConfigurator)
    .controller("topMenuController", Controllers.TopMenuController)

如何修改我的控制器定义或其注册,以便我们的代码再次编译？

(删除该implements angular.IController位会删除第二个错误,但第一个错误仍然存​​在)

编辑:我发现了这个错误

Answer 1

由于所有属性IController都是可选的,我相信您看到的错误是TypeScript 2.4中新的"弱类型"检查的结果.有关详细信息,请查看Microsoft的此链接.还要检查这个相关的Github问题.

微软的一些相关引用:

在TypeScript 2.4中,我们为我们称之为弱类型的内容添加了类似的检查.任何仅包含可选属性的类型都被视为弱类型,因为它对可以分配给它的内容提供的限制很少.

...

在TypeScript 2.4中,当属性中没有重叠时,将任何内容分配给弱类型现在是一个错误.

...

您可以将此视为TypeScript"强化"这些类型的弱保证,以捕获原本会出现的无声错误.

由于这是一个重大变化,您可能需要了解与严格对象文字检查相同的变通方法:

1. 如果它们确实存在,则声明属性.
2. 为弱类型添加索引签名(即[propName:string]:{}).
3. 使用类型断言(即选择选项).

编辑:根据这些信息,一个简单的解决方案是实现其中定义的方法之一IController.例如,正如@Amy在评论中所提到的,您可以$onInit在控制器中定义一个空方法.

编辑:为了完整起见,这里是完整的代码:

export class TopMenuController implements angular.IController {
  static $inject = ["$templateCache", "Restangular"];

  $onInit() { }

  constructor(
      private readonly $templateCache: angular.ITemplateCacheService,
      private readonly restangular: Restangular.IElement) {
  }
}

Answer 2

我也面临同样的问题,我得到了解决

• 实施 IController

• 在构造函数之前添加此代码(或者在代码中的任何位置这是我的偏好)$onInit = () => { };

这里是完整的代码,希望这会给出一个清晰的观点

module MyApp {
    export class HomeController implements angular.IController {
        $onInit = () => { };
        user: string;
        constructor() {
            this.user = "mali";
        }
    }
    angular.module('app').controller('homeController', MyApp.HomeController)
}

快乐的编码