Angular Ivy strictTemplates true 类型 'boolean | null' 不可分配给类型 'boolean'

Question

我已经将我的应用程序更新到 9 版本。一切都很好，但我有问题将 strictTemplates 设置为 true。例如这段代码

loaded$: Observable<boolean>
[loaded]="loaded$ | async"
@Input() loaded!: boolean;

我收到错误类型 'boolean | null' 无法分配给类型 'boolean'。

这修复了错误

@Input() loaded!: boolean | null;

但是我看不懂要点，有人给我解释一下吗？

Answer 1

这更多的是 Typescript 更新错误而不是 Angular 更新，我相信，在 Typescript 2X 版本之后，null 和 undefined 不再是其他类型的子类型，这一如既往地提供更多的编译时间。静态类型检查。

如果您的实际类型是布尔值并且您收到的结果是 null，这不会对您产生太大影响，但如果您的实际类型是一个对象，您必须放心，Typescript 会强制您做所有真实的事情检查以免陷入运行时错误。

事实证明，Javscript 中的一切都是对象，但我们通常不使用布尔值作为对象，但如果我们使用：

let a = true;
console.log(a.toString());
a = null;
console.log(a.toString());

Answer 2

原因是因为 async 管道 return 签名总是类似于 <T>(input$: Observable<T>): T | null，因为它 return 在模板等待响应时对模板无效异步调用。

您可以做您已经做过的事情并允许 null，或者如果您知道它永远不会为 null，请使用非 null 断言运算符：

[loaded]="(loaded$ | async)!"

或在此处禁用类型检查：

[loaded]="$any(loaded$ | async)"

或者对于这种特殊情况，您可能会这样做：

[loaded]="(loaded$ | async) || false"

Angular Ivy strictTemplates true Type 'boolean | null' is not assignable to type 'boolean'