Angular项目TypeScript4.4报错TS2564:selectedMovie属性无初始化未在构造函数赋值

报错原因 #

TypeScript 2.7及以上版本默认开启了严格类属性初始化检查，要求类中声明的属性必须在声明时赋值，或在构造函数内部完成赋值，否则就会抛出error TS2564错误。你的代码里selectedMovie只声明了类型没有赋值，也没有在构造函数中处理，所以触发了报错。

小优化建议：Movie类中name的类型建议改为小写的string，TypeScript中小写的string代表字符串原始类型，大写String是包装对象类型，日常开发优先使用小写类型。

可行解决方案（推荐度从高到低） #

方案1：声明为可选类型 #

将selectedMovie设为可选属性，完全符合「未点击时没有选中值」的业务逻辑：

// movies.component.ts 中修改属性声明
selectedMovie?: Movie;

同时需要修改模板，避免未选中时访问属性报错，二选一即可：

1. 使用安全导航运算符：

<span class="badge badge-warning">
    id: {{selectedMovie?.id}} name: {{selectedMovie?.name}}
</span>

2. 给顶部卡片加*ngIf控制显示，未选中时隐藏：

<div class="card" *ngIf="selectedMovie">
     <div class="card-body">
        <span class="badge badge-warning">
            id: {{selectedMovie.id}} name: {{selectedMovie.name}}
        </span>
    </div>
</div>

方案2：使用明确赋值断言 #

如果你可以保证selectedMovie在被使用前一定会被赋值（比如初始化时默认选中第一个电影），可以加!告诉TypeScript不需要校验这个属性的初始化：

// movies.component.ts 中修改属性声明
selectedMovie!: Movie;

// 可选补充初始化逻辑，默认选中第一个电影
ngOnInit() {
  this.selectedMovie = this.movies[0];
}

方案3：设置默认初始值 #

直接给selectedMovie赋一个初始值，避免空值问题：

// movies.component.ts 中修改属性声明
selectedMovie: Movie = new Movie(0, '请选择电影');

不推荐方案：关闭严格初始化检查 #

如果不需要这个校验规则，可以修改项目根目录的tsconfig.json，将strictPropertyInitialization设为false，但会失去相关类型校验能力，不建议使用。

内容的提问来源于stack exchange，提问作者Alper Yıldırım