升级TypeScript后，Angular控制器注册现在无法编译 [英] After upgrading TypeScript, Angular controller registration now fails to compile

问题描述

我们正在使用TypeScript 2.2.升级到2.4后，我们现在可以通过编译得到此信息:

We were using TypeScript 2.2. After upgrading to 2.4, we now get this on compilation:

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

error TS2345: Argument of type 'typeof TopMenuController' is not assignable to parameter of type 'Injectable<IControllerConstructor>'. Type 'typeof TopMenuController' is not assignable to type '(string | (new (...args: any[]) => IController) | ((...args: any[]) => void | IController))[]'. Property 'push' is missing in type 'typeof TopMenuController'.

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

ts\controllers\TopMenuController.ts(2,18): error TS2559: Type 'TopMenuController' has no properties in common with type 'IController'.

我不了解第一个错误，因此使用Google搜索很难.我只是在遇到第一个错误时寻求帮助. (由于尝试解决第一个错误，我遇到了第二个错误).这是控制器:

I don't understand the first error and Googling it has been difficult. I'm only asking for assistance with the first error. (I'm getting the second error due to my attempts to resolve the first). Here's the controller:

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

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

这就是它的注册方式.

And this is how it is registered.

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

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

How do i modify my controller definition or its registration so our code compiles again?

(删除implements angular.IController位将删除第二个错误，但第一个仍然存在)

(Removing the implements angular.IController bit removes the second error, but the first remains)

编辑:我发现了此错误

推荐答案

由于IController的所有属性都是可选的，因此我认为您看到的错误是对TypeScript中的弱类型"进行新检查的结果2.4.检查来自Microsoft的此链接有关详细信息.还要检查与Github相关的问题.

Since all of the properties of IController are optional, I believe the errors you are seeing are a result of the new checking for "Weak Types" in TypeScript 2.4. Check this link from Microsoft for details. Also check this related Github issue.

Microsoft的一些相关报价:

Some relevant quotes from Microsoft:

在TypeScript 2.4中，我们添加了类似的检查功能来检查弱点 类型.任何仅包含可选属性的类型都被视为 弱类型，因为它对可分配的内容几乎没有限制

In TypeScript 2.4, we’re adding a similar check for what we call weak types. Any type that contains only optional properties is considered a weak type since it provides few restrictions on what can be assigned to it.

...

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

In TypeScript 2.4, it’s now an error to assign anything to a weak type when there’s no overlap in properties.

...

您可以将其视为TypeScript强化"弱者 这些类型的保证能够赶上原本不会沉默的事物 错误.

You can think of this as TypeScript "toughening up" the weak guarantees of these types to catch what would otherwise be silent bugs.

由于这是一项重大更改，因此您可能需要了解 与严格对象字面量相同的解决方法 检查:

Since this is a breaking change, you may need to know about the workarounds which are the same as those for strict object literal checks:

1. 声明属性是否确实存在.
2. 将索引签名添加到弱类型(即[propName:string]:{}).
3. 使用类型断言(即选择作为选项).

1. Declare the properties if they really do exist.
2. Add an index signature to the weak type (i.e. [propName: string]: {}).
3. Use a type assertion (i.e. opts as Options).

编辑:根据此信息，一个简单的解决方案是实施IController中定义的方法之一.例如，正如@Amy在评论中提到的那样，您只需在控制器中定义一个空的$onInit方法即可.

Based on this information, a simple solution would then be to implement one of the methods defined in IController. For example, as mentioned by @Amy in the comments, you could just define an empty $onInit method in your controller.

为了完整起见，下面是完整的代码:

For the sake of completeness, here's the full code:

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

  $onInit() { }

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

这篇关于升级TypeScript后，Angular控制器注册现在无法编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！