React+TypeScript日期格式转换疑问：为何需重新实例化Date？

我在React+TypeScript项目中定义了如下数据类型：

export type Payment = {
  paymentId: number;
  paymentDate: Date;
}

实际接收到的示例日期数据是2022-02-11T20:00:00.000Z，尝试直接执行以下代码时报错date.toISOString is not a function：

{payment.paymentDate.toISOString().substring(0, 10)}

必须用new Date(payment.paymentDate)重新转换为Date实例才能正常运行，所有日期数据都是有效的，想知道为什么必须做这个转换？

核心原因：类型声明和运行时数据不匹配 #

TypeScript的类型是编译时检查规则，它不会在运行时自动帮你把字符串转换成Date对象。你虽然把paymentDate声明为Date类型，但实际从接口/后端拿到的是ISO格式的字符串，而非真正的Date实例。

在浏览器或Node.js的运行环境里，字符串本身没有toISOString这类Date实例的方法，所以直接调用会报错；而new Date(有效的日期字符串)会把字符串解析成合法的Date实例，此时就能正常调用Date的方法了。

实用解决方案 #

1. 接口数据统一转换（推荐） #

在接收接口数据时，提前把日期字符串转为Date实例，保证运行时数据和TypeScript类型完全匹配：

// 假设从接口获取原始数据
const rawPayment = await fetch('/api/payment').then(res => res.json());
// 转换日期字段
const payment: Payment = {
  ...rawPayment,
  paymentDate: new Date(rawPayment.paymentDate)
};

// 后续直接调用即可
{payment.paymentDate.toISOString().substring(0, 10)}

2. 写个兼容型格式化工具函数 #

如果不想提前转换全量数据，可以写一个同时支持字符串和Date实例的格式化函数：

function formatToMMDDYYYY(date: Date | string): string {
  const dateInstance = typeof date === 'string' ? new Date(date) : date;
  // 直接用浏览器内置方法格式化，避免手动截取字符串
  return dateInstance.toLocaleDateString('en-US', {
    month: '2-digit',
    day: '2-digit',
    year: 'numeric'
  });
}

// 使用方式
{formatToMMDDYYYY(payment.paymentDate)}

3. 调整类型声明（不推荐） #

如果暂时不想处理数据转换，也可以把类型改为兼容字符串：

export type Payment = {
  paymentId: number;
  paymentDate: Date | string;
}

但这样会丢失TypeScript的类型约束，后续使用时需要额外判断类型，容易引发其他问题，不建议长期使用。

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