Nullish coalescing sans parenthèses

Ce diagnostic détecte les cas où l'opérateur de nullish coalescing (??) est mélangé avec les opérateurs logiques « ou » (||) ou « et » (&&) sans parenthèses pour lever l'ambiguïté sur la précédence.

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

@Component({
  template: `<button [disabled]="hasPermission() && task()?.disabled ?? true">Run</button>`,
})
class MyComponent {
  hasPermission = input(false);
  task = input<Task | undefined>(undefined);
}

Quel est le problème ?

Sans parenthèses pour lever l'ambiguïté, il est difficile de savoir si c'est ?? ou ||/&& qui est évalué en premier. C'est considéré comme une erreur en TypeScript et en JavaScript, mais cela a historiquement été autorisé dans les templates Angular.

Que faire à la place ?

Utilisez toujours des parenthèses pour lever l'ambiguïté dans ces situations. Si vous n'êtes pas sûr de l'intention d'origine du code mais souhaitez conserver le même comportement, placez les parenthèses autour de l'opérateur ??.

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

@Component({
  template: `<button [disabled]="hasPermission() && (task()?.disabled ?? true)">Run</button>`,
})
class MyComponent {
  hasPermission = input(false);
  task = input<Task | undefined>(undefined);
}