Angular项目TrainingService报TS类型错误如何解决

相关代码上下文 #

开发时首先定义了Exercise模型接口：

export interface Exercise {
    id: string;
    name: string;
    duration: number;
    calories: number;
    date?: Date;
    state?: 'completed' | 'cancelled' | null;
}

服务类TrainingService中runningExercise的类型声明为Exercise | undefined | null，报错出现在cancelExercise方法中，原始问题代码如下：

cancelExercise(progress: number) {
    this.exercises.push({ 
        ...this.runningExercise as Exercise, 
        duration: this.runningExercise.duration,
        calories: 
        date: new Date(), 
        state: 'cancelled' 
    });
    this.runningExercise = null;
    this.exerciseChanged.next(null);
}

触发的两个报错分别为：

• 访问this.runningExercise.duration时提示Object is possibly 'null' or 'undefined'.ts(2533)
• 定义date: new Date()时提示Cannot find name 'date'. Did you mean 'Date'? ts(2552)

报错原因与修复 #

1. ts(2533) 空值访问错误 #

原因：runningExercise的联合类型包含null和undefined，TypeScript严格空值检查模式下，不允许直接访问可能为空的变量的属性。即使前面写了...this.runningExercise as Exercise的类型断言，后续单独读取属性时，TS依然会基于变量的原始类型做校验，不会被前面的断言影响。
修复方式：
在方法最开头加空值拦截，只要runningExercise为空就直接终止方法执行，TS会自动识别后续代码块中runningExercise一定是有效的Exercise类型，不会再触发空值校验。
另外注意课程原逻辑里，取消训练时需要根据传入的progress进度值，折算实际完成的运动时长和消耗卡路里，当前代码里duration直接取了运动总时长，不符合业务逻辑。

2. ts(2552) 找不到名称date错误 #

原因：属于纯书写语法错误，calories:后没有写对应的赋值内容就直接换行，TS解析时会把下一行开头的date识别成未定义的变量，而不是对象的属性键，因此抛出找不到名称的错误。
修复方式：补全calories字段的赋值逻辑，按进度折算实际卡路里消耗即可，不要留未完成的键值对。

修复后的完整cancelExercise代码 #

cancelExercise(progress: number) {
    // 空值拦截，避免空值访问报错
    if (!this.runningExercise) {
        return;
    }
    this.exercises.push({ 
        ...this.runningExercise,
        // 按完成进度折算实际运动时长
        duration: this.runningExercise.duration * (progress / 100),
        // 按完成进度折算实际消耗卡路里
        calories: this.runningExercise.calories * (progress / 100),
        date: new Date(), 
        state: 'cancelled' 
    });
    this.runningExercise = null;
    this.exerciseChanged.next(null);
}

修复后不需要额外加as Exercise类型断言，TS可以自动推断对象结构符合Exercise接口要求。

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