괄호 없는 널 병합 연산

이 진단은 널 병합 연산자(??)를 논리 OR(||) 또는 논리 AND(&&) 연산자와 함께 사용하면서 우선순위를 명확히 하는 괄호가 없는 경우를 감지합니다.

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);
}

무엇이 문제인가요?

우선순위를 명확히 하는 괄호가 없으면 ??와 ||/&& 중 어느 연산자가 먼저 평가되는지 이해하기 어렵습니다. TypeScript와 JavaScript에서는 오류이지만, Angular 템플릿에서는 기존에 허용되어 왔습니다.

어떻게 해결하나요?

이러한 상황에서는 항상 괄호를 사용해 우선순위를 명확히 하세요. 원래 코드의 의도가 확실하지 않지만 기존 동작을 유지하려면 ?? 연산식 주위를 괄호로 감싸세요.

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);
}