从打字稿中的API响应正确投射日期
我有一个 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由于打字稿的限制，它仍然是一个字符串。
这可能会在代码的后面导致问题，我希望所有这些日期字段都是实际的 Date 对象。
我大概可以这样做：data.date = new Date(data.date);。但由于很多原因，这不是可行的方法。
有没有更好的方法来处理打字稿中的日期？您通常如何处理来自 API 的响应日期？
回答
因此，最适合我的用例的解决方案类似于@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}Td{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);
}
}