Angular keyvalue pipe无法正确推断类型 IntelliJ报类型不匹配错误

报错原因 #

该报错属于IntelliJ系IDE（IDEA、WebStorm）Angular模板类型检查插件的重载匹配优先级bug，与业务代码逻辑无关：

• 你定义的Record<string, {timeInSeconds: number | undefined, unit: string}>类型完全符合KeyValuePipe第三个K extends string的重载规则，代码可正常编译运行
• IDE的静态检查器未遵循TypeScript从上到下的重载匹配规则，错误优先匹配了第一个要求入参为ReadonlyMap的重载，因此抛出类型不兼容的误报。

修复方案 #

方案1：单行抑制IDE误报（最推荐，不影响其他检查） #

在报错的*ngFor行上方添加IDE检查抑制注释即可：

<div class="main">
    <!--suppress AngularInvalidPipeArgumentType -->
    <ng-container *ngFor="let threshold of durationThreshold | keyvalue"></ng-container>
</div>

方案2：添加显式类型断言辅助IDE识别 #

在组件中新增一个类型转换辅助方法，告诉IDE变量的实际类型：

// 组件类中添加
public asStringKeyRecord(input: unknown): Record<string, any> {
  return input as Record<string, any>;
}

模板中调用该方法包装入参：

<ng-container *ngFor="let threshold of asStringKeyRecord(durationThreshold) | keyvalue"></ng-container>

方案3：升级IDE版本 #

JetBrains在2023.2及以上版本的Angular插件中已经修复了该重载匹配bug，升级IDE到对应版本并更新Angular插件即可永久解决该问题。

方案4：关闭模板严格类型检查（不推荐） #

如果不需要模板类型检查能力，可在tsconfig.json的angularCompilerOptions配置中关闭严格模板检查：

{
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

该方案会丢失所有模板类型校验能力，仅作为临时兜底方案使用。

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