如何解决Angular中async管道搭配其他管道使用时出现的报错问题？

报错原因 #

• 你定义lastUpdate变量时没有为Promise显式声明返回值的泛型类型，TypeScript默认会将无泛型的Promise推导为Promise<unknown>类型
• Angular的async管道处理Promise<unknown>后返回的结果类型是unknown，而后续的date管道仅接收string | number | Date | null | undefined类型的入参，类型不匹配因此触发编译报错。

解决方案 #

方案1：给Promise添加显式泛型声明（最推荐） #

直接在TS代码中为lastUpdate指定明确的类型，不需要修改模板代码，完全符合TypeScript类型校验规则：

// 显式声明Promise返回值为Date类型
lastUpdate: Promise<Date> = new Promise((resolve, reject) => {
    const date = new Date();
    setTimeout(
        () => {
            resolve(date);
        }, 2000
    );
});

方案2：模板中使用临时类型断言 #

如果仅需要临时跳过类型校验快速调试，可以在模板中使用Angular内置的$any()方法做类型断言：

<p>Mis à jour : {{ $any(lastUpdate | async) | date: 'yMMMMEEEEd' | uppercase }}</p>

该方案会丢失类型校验能力，不建议长期使用。

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