Angular开发报TS2564：属性无初始化器且构造函数未明确赋值

报错原因 #

这个错误是TypeScript开启strictPropertyInitialization严格校验规则时的常规报错：TS要求类中声明的所有属性，必须在构造函数执行完成前完成初始赋值，否则就会抛出该类型错误。你之前尝试初始化为空数组没有生效，基本是本地开发服务热更新缓存、编译缓存未刷新导致的，不是写法本身有问题。

可落地解决方法 #

根据业务场景选任意一种即可：

• 方案1：声明属性时直接初始化空数组（最推荐，符合TS规范，无后续空值隐患）
  修改属性声明的代码：

  // 声明时直接赋值空数组，完全满足初始化校验要求
  public userDatas: UserData[] = [];
  

  改完如果还报错，直接停掉本地跑的Angular服务，删掉项目根目录下的.angular缓存文件夹，重新执行ng serve启动就行，属于Angular开发里很常见的缓存不更新问题。

• 方案2：使用明确赋值断言
  如果你确定userDatas会在ngOnInit生命周期、也就是页面首次渲染前通过接口请求完成赋值，不想给初始空值，可以在属性名后面加!，手动告诉TS这个属性你能保证在使用前肯定赋值，不用做初始化校验：

  // 后缀的!就是明确赋值断言
  public userDatas!: UserData[];
  

• 方案3：把属性标记为可选
  如果要兼容接口请求失败、属性可能始终不存在的场景，可以给属性加?标记为可选属性：

  public userDatas?: UserData[];
  

  注意：用这个写法的话，模板里渲染列表前必须先做空值判断，不然遍历的时候会报空值错误，参考模板写法：

  <!-- 先判断属性有值再执行遍历 -->
  <div *ngIf="userDatas">
    <div *ngFor="let data of userDatas">
      <!-- 这里写你的业务渲染逻辑 -->
    </div>
  </div>
  

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