Après la mise à niveau de TypeScript, l'enregistrement du contrôleur angulaire échoue maintenant.

Question

Nous avons été à l'aide de la Machine 2.2. Après la mise à jour 2.4, nous disposons maintenant de cette compilation:

erreur TS2345: l'Argument de type "typeof TopMenuController" n'est pas assignable à paramètre de type 'Injectable<IControllerConstructor>'. Type "typeof TopMenuController" n'est pas assignable à type '(chaîne | (nouveau (...args: aucun[]) => IController) | ((...args: aucun[]) => void | IController))[]'. Propriété de 'push' est absente du type "typeof TopMenuController'.

ts\controllers\TopMenuController.ts(2,18): erreur TS2559: Type 'TopMenuController' n'a pas de propriétés en commun avec le type 'IController'.

Je ne comprends pas la première erreur et Googler ça a été difficile. Je suis le seul à demander de l'aide à la première erreur. (Je suis la deuxième erreur à cause de mes tentatives pour résoudre le premier). Voici le contrôleur:

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

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

Et c'est de cette façon, il est inscrit.

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

Comment puis-je modifier mon contrôleur de définition ou de son enregistrement en sorte que notre code compile de nouveau?

(Suppression de l' implements angular.IController bits supprime le deuxième message d'erreur, mais le premier reste)

Edit: j'ai trouvé ce bug

Answer 1

Depuis toutes les propriétés de l' IController sont en option, je crois que les erreurs que vous voyez sont un résultat de la nouvelle vérification pour "la Faiblesse des Types" en caractères d'imprimerie 2.4. Vérifier ce lien à partir de Microsoft pour plus de détails. Vérifiez également cette Github question.

Quelques citations de Microsoft:

En caractères d'imprimerie 2.4, nous allons ajouter un test similaire à ce que nous appelons la faiblesse de la les types. N'importe quel type qui contient uniquement les propriétés facultatives est considéré comme un type faible, puisqu'il n'offre que peu de restrictions sur ce qui peut être attribué à elle.

...

En caractères d'imprimerie 2.4, maintenant c'est une erreur d'attribuer quelque chose à un type faible quand il n'y a pas de chevauchement dans les propriétés.

...

Vous pouvez considérer cela comme Tapuscrit "durcissement" la faiblesse de l' les garanties de ces types d'attraper ce qui serait autrement silencieux des bugs.

Puisque c'est une modification de rupture, vous devez savoir à propos de la solutions de contournement qui sont les mêmes que celles strictement littéral d'objet contrôles:

1. Déclarer les propriétés si elles existent vraiment.
2. Ajouter un indice de signature pour le type faible (c'est à dire [propName: string]: {}).
3. L'utilisation d'un type d'assertion (c'est à dire décide que les Options).

Edit: sur cette Base, une solution simple serait alors de mettre en œuvre l'une des méthodes définies dans IController. Par exemple, comme mentionné par @Amy dans les commentaires, vous pouvez simplement définir un vide $onInit méthode dans votre contrôleur.

Edit: Par souci d'exhaustivité, voici le code complet:

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

  $onInit() { }

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

Answer 2

J'ai également fait face au même problème que j'ai résolu par

• mettre en œuvre IController

• ajouter ce code avant constructeur ( ou n'importe où dans le code c'est ma préférence ) $onInit = () => { };

voici le code complet, j'espère que cela vous donnera une vue claire

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

Code heureux

Answer 3

l'ajout du code suivant a résolu le problème

 $onInit = () => { };