Angular 17新控制流语法如何实现类型断言变量存储？

我们常用*ngIf="assertType(item) as renamedItem"这种技巧，在模板里通过类型断言函数给变量指定类型，旧写法示例如下：

旧写法（*ngIf） #

模板代码：

<ng-template
    gridCellTemplate
    let-item
>
    <ng-container *ngIf="assertType(item) as typedItem">
    <!-- 此处typedItem类型为ITEM_TYPE -->
    ...
    </ng-container>
</ng-template>

对应的TypeScript断言函数：

public assertType(item: any): ITEM_TYPE {
    return item;
}

新写法（@if控制流） #

完全可以用Angular新的@if()控制流语法实现相同功能，写法更简洁：

模板代码：

<ng-template gridCellTemplate let-item>
  @if (assertType(item) as typedItem) {
    <!-- 此处typedItem自动推导为ITEM_TYPE类型，可直接使用 -->
    ...
  }
</ng-template>

TypeScript断言函数无需修改，和上面的代码一致。

这种写法逻辑和旧版完全相同：通过as关键字将断言函数返回的结果绑定到新变量，同时Angular会根据函数的返回值类型自动识别typedItem的类型，在模板编辑时能获得完整的类型提示。

内容的提问来源于stack exchange，提问作者Ch3micaL