null이 될 수 없는 값에 사용한 옵셔널 체이닝

이 진단은 Angular 템플릿에서 옵셔널 체이닝 연산(?.)의 왼쪽 값의 타입에 null이나 undefined가 포함되지 않은 경우를 감지합니다.

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

무엇이 문제인가요?

null이 될 수 없는 입력값에 옵셔널 체이닝 연산자를 사용해도 아무런 효과가 없습니다. 이는 값에 허용된 타입과 템플릿에 값을 표시하는 방식이 일치하지 않는다는 뜻입니다. 개발자는 옵셔널 체이닝 연산자의 결과가 null이나 undefined일 수 있다고 생각할 수 있지만, 실제로는 어느 값도 될 수 없습니다. 이로 인해 프로그램의 예상 출력에 혼동이 생길 수 있습니다.

어떻게 해결하나요?

템플릿과 선언한 타입이 일치하도록 수정하세요. 입력값의 타입을 다시 확인하고 실제로 null이 될 수 있어야 하는지 확인하세요.

입력값이 null이 될 수 있어야 한다면 타입에 null 또는 undefined를 추가하여 이를 나타내세요.

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

입력값이 null이 될 수 없어야 한다면 ? 연산자를 삭제하세요.

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

필수 설정

확장 진단이 발생하려면 strictTemplates를 활성화해야 합니다. optionalChainNotNullable 진단이 발생하려면 strictNullChecks도 활성화해야 합니다.

이 상황을 피할 수 없다면 어떻게 하나요?

프로젝트의 tsconfig.json 파일을 수정하여 이 진단을 비활성화할 수 있습니다.

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

자세한 내용은 확장 진단 설정을 참고하세요.