Angular 8项目升级到Angular 13出现大量语法报错是什么原因？

版本变动确认 #

Angular 8升级到13出现的语法类报错，大部分是因为Angular 12及以上版本默认启用了TypeScript严格模式校验，搭配框架自身的API迭代，才会出现大量之前版本没有的报错，属于跨大版本升级的正常情况。

具体报错处理方案 #

1. 类属性（含FormGroup）未在构造函数初始化报错 #

报错原因

TypeScript严格模式默认开启了strictPropertyInitialization规则，要求类的所有属性必须在声明时赋值，或在构造函数中完成初始化。ngOnInit是类实例构造完成后才会触发的生命周期钩子，因此写在ngOnInit里的初始化逻辑不会被TS识别为有效初始化。

解决方式

• 方案一：将无前置依赖的初始化逻辑迁移到constructor中，示例代码如下：

// 旧写法（仅非严格模式下可用）
public userForm: FormGroup;

ngOnInit() {
  this.userForm = new FormGroup({
    name: new FormControl('')
  })
}

// 新写法
public userForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.userForm = this.formBuilder.group({
    name: ['']
  })
}

• 方案二：如果初始化逻辑依赖路由参数、输入属性等只能在ngOnInit中获取的内容，可以在属性声明时添加非空断言标记!，主动告知TS该属性一定会在使用前完成赋值：

// 加! 跳过初始化检查
public userForm!: FormGroup;

ngOnInit() {
  // 依赖路由参数的初始化逻辑
  const userId = this.route.snapshot.params.id;
  this.userForm = new FormGroup({
    id: new FormControl(userId)
  })
}

2. someObject["property"]语法提示属性不存在报错 #

报错原因

严格模式下noImplicitAny、strictObjectTypes规则开启后，TypeScript会严格校验对象的属性范围，如果对象没有定义对应的属性类型，就会抛出该错误。

解决方式

• 方案一：给对象提前定义完整类型接口，示例：

interface User {
  name: string;
  age: number;
}

const someObject: User = { name: '张三', age: 25 };
// 此时访问someObject["name"]不会报错

• 方案二：如果是属性不固定的通用对象，可以添加索引签名：

// 声明对象的所有字符串类型属性值都是any
const someObject: {[key: string]: any} = {};
someObject["customProp"] = '测试';

• 方案三：临时访问时使用类型断言，适合快速修复存量代码：

const value = (someObject as any)["property"];

其他通用语法报错处理 #

可以先调整tsconfig.json中的校验规则，逐步适配严格模式：

• 暂时关闭影响较大的校验规则，将以下配置添加到tsconfig.json的compilerOptions节点下：

{
  "compilerOptions": {
    "strictPropertyInitialization": false,
    "noImplicitAny": false,
    "strictNullChecks": false
  }
}

• 存量代码适配完成后，再逐个开启规则补充类型定义，避免出现运行时问题。

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