Chaînage optionnel sur une valeur non nullable

Ce diagnostic détecte, dans les templates Angular, les cas où la partie gauche d'une opération de chaînage optionnel (.?) n'inclut ni null ni undefined dans son type.

import {Component} from '@angular/core';

@Component({
  // Print the user's name safely, even if `user` is `null` or `undefined`.
  template: `<div>User name: {{ user?.name }}</div>`,
})
class MyComponent {
  // `user` is declared as an object which _cannot_ be `null` or `undefined`.
  user: {name: string} = {name: 'Angelino'};
}

Quel est le problème ?

Utiliser l'opérateur de chaînage optionnel avec une entrée non nullable n'a aucun effet et révèle un décalage entre le type autorisé d'une valeur et la façon dont elle est présentée dans le template. Un développeur pourrait raisonnablement supposer que le résultat de l'opérateur de chaînage optionnel peut valoir null ou undefined, alors qu'en réalité il ne prendra jamais aucune de ces valeurs. Cela peut créer de la confusion quant à la sortie attendue du programme.

Que faire à la place ?

Mettez le template et le type déclaré en cohérence. Vérifiez le type de l'entrée et confirmez si elle est réellement censée être nullable.

Si l'entrée doit être nullable, ajoutez null ou undefined à son type pour l'indiquer.

import {Component} from '@angular/core';

@Component({
  // If `user` is nullish, `name` won't be evaluated and the expression will
  // return the nullish value (`null` or `undefined`).
  template: `<div>{{ user?.name }}</div>`,
})
class MyComponent {
  user: {name: string} | null = {name: 'Angelino'};
}

Si l'entrée ne doit pas être nullable, supprimez l'opérateur ?.

import {Component} from '@angular/core';

@Component({
  // Template always displays `name` as `user` is guaranteed to never be `null`
  // or `undefined`.
  template: `<div>{{ user.name }}</div>`,
})
class MyComponent {
  user: {name: string} = {name: 'Angelino'};
}

Prérequis de configuration

strictTemplates doit être activé pour qu'un diagnostic étendu soit émis. strictNullChecks doit également être activé pour émettre les diagnostics optionalChainNotNullable.

Et si je ne peux pas l'éviter ?

Ce diagnostic peut être désactivé en modifiant le fichier tsconfig.json du projet :

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "optionalChainNotNullable": "suppress"
      }
    }
  }
}

Consultez la configuration des diagnostics étendus pour en savoir plus.