Почему мы получаем `возможно нулевые 'ошибки в ветке if?

Question

Мы включили strictNullInputTypes включен в tsconfig. json.

Компонент имеет простую наблюдаемую:

export class ExampleComponent {

  obs$ = of({
    prop: 12
  }).pipe(delay(1000));

}

В шаблоне компонента мы используем *ngIf ; else, например

<div *ngIf="obs$ | async as val; else loading">
  val = {{ val.prop  }}
</div>
<ng-template #loading>
  <div>
    loading..
  </div>
  >
</ng-template>

, когда мы строим проект, мы получаем ошибку:

ERROR in src/app/example-component.html:6:12 - error TS2531: Object is possibly 'null'.

6   val = {{ val.prop  }}
             ~~~~~~~~~~

Я не ожидал это, так как мы используем else деталь.

Подробности:

• Я понимаю, что труба asyn c добавит null к наблюдаемому типу, что нормально , Из документов :

  Канал asyn c в настоящее время предполагает, что Observable, на который он подписывается, может быть асинхронным, что означает, что, возможно, еще нет доступных значений. В этом случае он все равно должен что-то вернуть - что является нулевым. Другими словами, тип возвращаемого значения асинхронного канала c включает в себя значение NULL, что может привести к ошибкам в ситуациях, когда известно, что Observable синхронно генерирует ненулевое значение.

• поэтому obs$ | async as val может быть object или null
  • , когда оно null, ngIf будет отображать loading шаблон
  • в противном случае div будет отображено: так внутри div, val всегда будет ссылаться на объект, верно?
    Так почему же мы получаем ошибку possibly null?

To Воспроизведите тест, загрузите и извлеките код из простого примера на GitHub и:

• npm install
• npm run build

Обходной путь - использовать это выражение if: (obs$ | async)! as val; else loading

Answer 1

Обновление 06.03.2020

Проблема # 34572 исправлена ​​в angular 9.0.5

Оригинал

Там уже есть одна открытая проблема для этой проблемы в angular. Это происходит

Из-за семантики ngIf известно, что захваченная переменная контекста не обнуляется, однако средство проверки типа шаблона не будет рассматривать их как таковые и по-прежнему будет сообщать об ошибках, когда strictNullTypes включено.

Как вы упомянули в ОП Используйте функцию any или $ any для отключения проверки типа в шаблоне.

$ можно использовать any () в обязательных выражениях отключить проверку типов этого выражения. Это действительно похоже на что-либо в TypeScript

<div *ngIf="obs$ | async;let val; else loading">
  val = {{ $any(val).prop  }}
</div>

Answer 2

Вам нужно реализовать OnInit в вашем компоненте, и тогда strictNullInputTypes не будет работать, потому что Angular знает, что переменная obs$ никогда не может быть нулевой, потому что вы инициализируете в OnInit.

Изображение вашего класса изменено:

Любые сомнения спросите меня.