Vscode-ng-language-service: typescript 2.7 initialisation de propriété stricte casse l'inférence de type

Créé le 3 févr. 2018 · 6Commentaires · Source: angular/vscode-ng-language-service

J'ai mis à niveau vers typescript 2.7 avec la nouvelle fonctionnalité d'initialisation de propriété stricte : https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

Cela signifie qu'il avertira si les propriétés obligatoires ne sont pas initialisées dans le constructeur. Ceci est assez courant avec les entrées de composants obligatoires. Ils ne sont pas définis par le constructeur, donc TS se plaindra de :

@Component(...)
export class AppComponent {
  @Input() foo: Foo;
}

puisque foo n'est jamais initialisé. Vous pouvez résoudre ce problème avec une assertion manuelle indiquant que la propriété sera définie lors de l'initialisation (notez le point d'exclamation dans la déclaration de propriété foo) :

@Component(...)
export class AppComponent {
  @Input() foo!: Foo;
}

Cependant, une fois cela fait, l'inférence de type du service de langue angulaire dans vs code s'interrompt avec une erreur [Angular] Identifier 'name' is not defined. '<anonymous>' does not contain such a member :

Pour un repo de reproduction, voir https://github.com/wvanderdeijl/angular-strict-prop-init

Source

wvanderdeijl

👍1

Commentaire le plus utile

La bonne nouvelle est que TS 2.7 est pris en charge par la version 0.1.10 qui vient de sortir. La mauvaise nouvelle est que je vois toujours cette erreur et qu'elle pourrait être liée à ce problème. L'objet référencé a une signature d'index de clé, plutôt qu'une assertion d'affectation définie, mais les symptômes sont les mêmes. Si c'est le même problème, cf #149 et #126.

thw0rted le 31 août 2018

👍2

Tous les 6 commentaires

Malheureusement, TS 2.7 n'est pas pris en charge par Angular. Comme il est maintenant officiellement publié, Angular devrait bientôt ajouter un support.

hccampos le 4 févr. 2018

@hccampos existe-t-il des solutions de contournement à votre connaissance ? Obtenir le même non-sens dans mon HTML.

ghost le 26 févr. 2018

@wvanderdeijl en attendant utilisez "strictPropertyInitialization": false, . J'utilise également ts 2.7, non seulement parce que --watch est plus rapide, mais aussi parce qu'il corrige les importations automatiques relatives dans vscode.

À long terme, je ne vois aucun moyen raisonnable, comment angular pourra résoudre cela. Je suppose qu'il est préférable de toujours fournir des valeurs par défaut pour vos entrées sans avoir à utiliser le modificateur d'assertion d'affectation défini ! .

Ou pour être correct par programmation, activez le drapeau et procédez comme suit :

@Component({
  selector: 'app-test',
  template: '<div>{{ foo?.name }}</div>'
})
export class AppComponent {
  // foo can be undefined
  // both TS 2.7 and language service will compile correctly
  @Input() foo?: Foo;
  // or you can write @Input() foo: Foo | void = undefined; which is the same as above, just more explicit
}

Pourquoi est-ce ok ? Eh bien, le compilateur angulaire n'a aucune capacité à rendre les accessoires vraiment nécessaires,
donc même si vous ne rendez pas l'entrée "requise" dans la classe, vous pouvez toujours écrire <app-test><app-test> et le compilateur ne lancera aucune erreur, même si la propriété Input n'est pas facultative 👎

Hotell le 26 mars 2018

👍1

thw0rted le 31 août 2018

👍2

En fermant ceci, puisque Angular utilise maintenant TypeScript 3.6.
Veuillez mettre à niveau vers la dernière version et faites-nous savoir si vous rencontrez toujours ce problème. Merci!

kyliau le 13 nov. 2019

Ce problème a été automatiquement verrouillé en raison de l'inactivité.
Veuillez déposer un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_{_Cette action a été effectuée automatiquement par un bot._}