angularjs - Dopo l'aggiornamento di TypeScript, la registrazione del controller Angolare ora non riesce a compilare




typescript2.0 (2)

Stavamo usando TypeScript 2.2. Dopo l'aggiornamento a 2.4, ora lo otteniamo nella compilazione:

errore TS2345: l'argomento di tipo 'typeof TopMenuController' non è assegnabile al parametro di tipo 'Injectable <IControllerConstructor>'. Digitare 'typeof TopMenuController' non è assegnabile al tipo '(string | (new (... args: any []) => IController) | ((args: any []) => void | IController)) [ ]'. La proprietà 'push' manca nel tipo 'tipo di TopMenuController'.

ts \ controller \ TopMenuController.ts (2,18): errore TS2559: il tipo 'TopMenuController' non ha proprietà in comune con il tipo 'IController'.

Non capisco il primo errore e su Google è stato difficile. Sto solo chiedendo assistenza per il primo errore. (Sto ricevendo il secondo errore a causa dei miei tentativi di risolvere il primo). Ecco il controller:

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

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

E questo è come è registrato.

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

Come posso modificare la definizione del mio controller o la sua registrazione in modo che il codice venga compilato di nuovo?

(Rimuovendo il bit implements angular.IController rimuove il secondo errore, ma il primo rimane)

Edit: ho trovato questo bug


Ho anche affrontato lo stesso problema con il quale mi sono risolto

  • implementando IController

  • aggiungi questo codice prima del costruttore ( o ovunque nel codice questa è la mia preferenza ) $onInit = () => { };

ecco il codice completo, Spero che questo dia una visione chiara

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

Felice codifica


Poiché tutte le proprietà di IController sono opzionali, ritengo che gli errori che si stanno vedendo siano il risultato del nuovo controllo di "Tipi deboli" in TypeScript 2.4. Controlla questo link da Microsoft per i dettagli. Controlla anche questo problema relativo a Github .

Alcune citazioni rilevanti da Microsoft:

In TypeScript 2.4, stiamo aggiungendo un controllo simile per quelli che chiamiamo tipi deboli. Qualsiasi tipo che contenga solo proprietà opzionali è considerato un tipo debole poiché fornisce poche restrizioni su ciò che può essere assegnato ad esso.

...

In TypeScript 2.4, è ora un errore assegnare qualcosa a un tipo debole quando non c'è sovrapposizione di proprietà.

...

Si può pensare a questo come a TypeScript "rafforzando" le deboli garanzie di questi tipi per catturare ciò che altrimenti sarebbe un bug silenzioso.

Poiché si tratta di un cambiamento irreversibile, potrebbe essere necessario conoscere le soluzioni alternative uguali a quelle per i controlli letterali degli oggetti rigorosi:

  1. Dichiarare le proprietà se realmente esistono.
  2. Aggiungi una firma indice al tipo debole (cioè [propName: string]: {}).
  3. Utilizzare un tipo assertion (cioè opts come opzioni).

Modifica: in base a queste informazioni, una soluzione semplice sarebbe quindi quella di implementare uno dei metodi definiti in IController . Ad esempio, come menzionato da @Amy nei commenti, potresti semplicemente definire un metodo $onInit vuoto nel tuo controller.

Modifica: per completezza, ecco il codice completo:

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

  $onInit() { }

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




typescript2.0