如何将JSON中接收的java.sql.Date格式日期转换为JavaScript Date类型

实际上你接口返回的JSON中startDate和endDate已经被Jackson序列化为YYYY-MM-DD格式的字符串，并非直接返回java.sql.Date对象，直接在前端做字符串转Date对象即可，也可根据需求调整后端序列化规则。

前端处理方案 #

第一步：修正并优化TypeScript Coupon类 #

首先修正原有类中comapnyId的拼写错误，将日期字段类型调整为Date，新增构造函数处理原始接口数据转换：

// 定义接口返回的原始数据结构类型
interface CouponRaw {
  id: number;
  company: {id: number; name: string};
  category: string;
  title: string;
  description: string;
  startDate: string;
  endDate: string;
  amount: number;
  price: number;
  image: string;
}

// 优化后的Coupon业务类
class Coupon {
  public id: number = 0; 
  public companyId:number = 0;
  public category:string = "";
  public title:string = "";
  public description: string = "";
  public startDate: Date;
  public endDate: Date;
  public amount:number = 0;
  public price:number = 0;
  public image:string = "";

  constructor(raw: CouponRaw) {
    this.id = raw.id;
    this.companyId = raw.company.id;
    this.category = raw.category;
    this.title = raw.title;
    this.description = raw.description;
    // 转换字符串为JS Date对象
    this.startDate = parseSafeDate(raw.startDate);
    this.endDate = parseSafeDate(raw.endDate);
    this.amount = raw.amount;
    this.price = raw.price;
    this.image = raw.image;
  }
}

/**
 * 安全转换YYYY-MM-DD格式字符串为Date对象，解决部分旧浏览器时区偏移问题
 */
function parseSafeDate(dateStr: string): Date {
  const [year, month, day] = dateStr.split('-').map(Number);
  // JS月份从0开始计数，因此需要减1
  return new Date(year, month - 1, day);
}

第二步：接口请求后转换数据 #

拿到接口返回的原始JSON数据后，直接通过构造函数实例化Coupon对象即可：

// 示例：fetch请求转换
fetch('/api/coupon/list')
  .then(res => res.json())
  .then((rawCouponList: CouponRaw[]) => {
    const couponList = rawCouponList.map(raw => new Coupon(raw));
    // couponList中的startDate、endDate均为可直接使用的JS Date对象
  })

后端可选优化方案 #

如果需要统一全局日期序列化规则，避免前端兼容问题，可以在Java实体类的日期字段上添加Jackson的@JsonFormat注解，指定序列化格式与时区：

@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") // 时区替换为业务实际使用的时区
private Date startDate; 

@JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
private Date endDate; 

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