Angular中Date日期加天数操作运行异常如何解决？

问题根因 #

你遇到的现象本质是数值加法变成了字符串拼接，你标注的days: number只是TypeScript的编译时类型约束，实际运行时days参数是字符串类型（比如值为"12"）：startDate.getDate()返回的是数字类型的日期值（比如你测试场景的7），数字加字符串时，JS会自动把数字转为字符串做拼接，最终得到的是字符串"712"。

Date.setDate()方法接收到712这个值后，会自动从当前月的第一天往后推算712天，自然就得到了2024年2月的异常日期。

修复方案 #

在做加法前先强制把days转为数字类型，同时可以加非法值校验，修改后的代码如下：

addDays(days: number): Date {
    // 运行时强转为数字，避免入参实际为字符串的问题
    const validDays = Number(days);
    if (isNaN(validDays)) {
        throw new Error('days参数必须为有效数字');
    }
    const startDate = new Date(this.selectedDeliveryDate);
    const endDate = new Date(startDate);
    endDate.setDate(startDate.getDate() + validDays);
    console.log(startDate, endDate, validDays);
    return endDate;
}

补充说明 #

如果需要排查入参类型问题，可以在计算前打印类型确认：

console.log('days类型：', typeof days);
console.log('getDate返回值类型：', typeof startDate.getDate());

如果days的打印结果为string，就可以确认是入参来源的问题，比如参数来自用户输入、接口返回、DOM属性读取时，都可能拿到字符串类型的数字，需要提前做类型转换。

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