Nullish coalescing sur une valeur non nullable

Ce diagnostic détecte un opérateur de nullish coalescing (??) inutile dans les templates Angular. Plus précisément, il recherche les opérations dont l'entrée n'est pas « nullable », c'est-à-dire dont le type n'inclut ni null ni undefined. Pour de telles valeurs, la partie droite du ?? ne sera jamais utilisée.

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

@Component({
  // Template displays `username` if present, falls back to 'root' if it is
  // `null` or `undefined`.
  template: `<div>{{ username ?? 'root' }}</div>`,
})
class MyComponent {
  // `username` is declared as a `string` which _cannot_ be `null` or
  // `undefined`.
  username: string = 'Angelino';
}

Quel est le problème ?

Utiliser l'opérateur de nullish coalescing 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 la partie droite de l'opérateur de nullish coalescing s'affiche dans certains cas, alors qu'en réalité elle ne s'affichera jamais. 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({
  template: `<div>{{ username ?? 'root' }}</div>`,
})
class MyComponent {
  // `username` is now nullable. If it is ever set to `null`, 'root' will be
  // displayed.
  username: string | null = 'Angelino';
}

Si l'entrée ne doit pas être nullable, supprimez l'opérateur ?? et son opérande de droite, puisque TypeScript garantit que la valeur n'est jamais nullable.

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

@Component({
  // Template always displays `username`, which is guaranteed to never be `null`
  // or `undefined`.
  template: `<div>{{ username }}</div>`,
})
class MyComponent {
  username: string = '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 nullishCoalescingNotNullable.

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": {
        "nullishCoalescingNotNullable": "suppress"
      }
    }
  }
}

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