reactjs - 从 typescript 中的 API 响应正确转换日期

Question

我有一个 REST API，它提供以下格式的数据:-{"id": 1, "name": "New event", "date": "2020-11-14T18:02:00"}我的前端 React 应用程序中的界面如下:-

export interface MyEvent {
  id: number;
  name: string;
  date: Date;
}

我使用 axios 从 API 获取响应。

const response = await axios.get<MyEvent>("/event/1");
const data = response.data;

然而， data.date由于 typescript 限制，仍然是一个字符串。
这可能会在代码的后面导致问题，我希望所有这些日期字段都是实际的 Date 对象。
我可能会做这样的事情: data.date = new Date(data.date); .但由于很多原因，这不是可行的方法。
有没有更好的方法来处理 typescript 中的日期？您通常如何处理来自 API 的响应日期？

Answer 1

因此，最适合我的用例的解决方案类似于@Amy 在原始问题的评论中提到的解决方案。
所以我使用 Axios 拦截器将日期转换为 Date 对象。

const client = axios.create({ baseURL: process.env.NEXT_PUBLIC_API_BASE_URL });

client.interceptors.response.use(originalResponse => {
  handleDates(originalResponse.data);
  return originalResponse;
});

export default client;

为了识别日期，我使用了正则表达式，为了转换为 Date 对象，我使用了 date-fns 包。

const isoDateFormat = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d*)?$/;

function isIsoDateString(value: any): boolean {
  return value && typeof value === "string" && isoDateFormat.test(value);
}

export function handleDates(body: any) {
  if (body === null || body === undefined || typeof body !== "object")
    return body;

  for (const key of Object.keys(body)) {
    const value = body[key];
    if (isIsoDateString(value)) body[key] = parseISO(value);
    else if (typeof value === "object") handleDates(value);
  }
}