Angular 14升级后ngFor报Object is of type 'unknown'错误

Angular 14 开启 strictTemplates: true 严格模板类型检查规则后，*ngFor 的类型推导逻辑发生变更：即便将localDocumentData声明为any类型，严格模板校验模式下不会自动将遍历产出的条目推导为any，会回退为unknown类型，直接访问unknown类型的属性就会触发Object is of type 'unknown'.ngtsc(2571)的类型错误提示。
本地构建无报错是因为默认构建流程不会将模板类型检查错误作为阻断编译的致命错误，但编辑器集成的Angular语言服务会严格按照tsconfig配置执行全量模板校验，因此会持续出现错误高亮。

按推荐优先级从高到低排列：

• 方案1（最规范，推荐优先使用）：为业务数据定义明确的TypeScript接口，替换any类型声明
  1. 先在组件TS文件中定义对应的数据结构类型：

  // 单文件条目类型
  interface FileItem {
    thumbnail: string;
    file_name: string;
    file_size: number;
  }
  // 接口返回的文档数据类型
  interface LocalDocumentRes {
    files: FileItem[];
    // 其余返回字段按需补充类型定义
  }
  
  // 替换原有的any类型声明
  localDocumentData: LocalDocumentRes;
  

  2. 保存后Angular语言服务会自动推导*ngFor中file的类型为FileItem，错误高亮直接消失，同时还能获得模板内的属性自动补全、类型校验能力。
• 方案2（快速修复，适合临时迭代场景）：使用Angular模板内置的$any()类型转换函数，显式标记跳过类型检查
  直接修改模板中*ngFor的遍历源，外层包裹$any()即可：

  <div class="file" *ngFor="let file of $any(localDocumentData).files; index as i;">
        <div class="card">
             <img src={{file.thumbnail}} alt={{file.file_name}}>
             <p>{{file.file_name}}</p>
             <p>{{ file.file_size | bytes: false }}</p>
        </div>
   </div>
  

• 方案3（不推荐，会丢失类型检查能力）：关闭严格模板校验
  修改tsconfig.json中angularCompilerOptions下的配置项：

  "strictTemplates": false
  

  修改完成后需要重启编辑器、重启Angular语言服务才能生效。该方案会关闭所有Angular模板的类型校验，大幅提升模板类型相关bug的出现概率，非特殊情况不建议使用。

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