在 javascript/typescript 前端和 ASP.net Core 5 后端之间传递日期对象的正确方法

Posted 2023-04-12

【中文标题】在 javascript/typescript 前端和 ASP.net Core 5 后端之间传递日期对象的正确方法

【英文标题】：Proper way to pass date objects between a javascript/typescript frontend and a ASP.net Core 5 backend

【发布时间】：2021-12-24 05:46:18

【问题描述】：

我正在开发一个 Web 应用程序，其中后端是用 ASP.net Core 5 编写的 REST Web API，前端是用 TypeScript 编写的 Angular 应用程序。

我的一个 ASP.net 后端 API 返回此 C# 对象的一个​​实例：

public class MyClass

  DateTime expires get; set;
  string ticket get; set;

在我的 Angular 应用程序中，我使用 Angular 的 HTTP Client 调用此 API，并将结果反序列化为以下 TypeScript 类的实例：

export class MyClass

  expires: Date;
  ticket: string;

但是，这不能正常工作，因为如果我在返回 TypeScript 对象后检查它，我可以看到 expires 字段实际上包含 string，而不是 Date 对象。

我想这是因为数据以 JSON 格式在后端和前端之间传输，它不支持类型但只知道字符串和数字，因此 C# DateTime 对象被转换为字符串。

我的问题是：处理这个问题的最佳方法是什么？如果可能的话，我想保持我的对象是强类型的......我可以在 ASP.net 和/或 Angular 端进行一些配置，以便这种序列化自动工作吗？或者如果不是，那么下一个最佳方法是什么？

【问题讨论】：

你在后端NewtonSoft或System.Text.Json使用哪个json转换器？

它不能自动完成，因为 typescript 类型提示有点假——你不能像在 C# 中那样在运行时反映它们，它们在运行时不存在。所以角度不能知道“过期”实际上是日期（json也没有日期的概念）。您可以做的最好的事情是手动转换，或者在反序列化响应时 - 将所有看起来像日期的字符串转换为日期。

作为 Evk，说 Angular 总是接收一个字符串，你可以使用这样的方法SO

@AmirJabari：使用 .NET 5 的默认值，我相信是 System.Text.Json

是的，您必须手动操作，expires 的值应该类似于 2021-11-12T18:52:59.0349748+00:00 您可以像 new Date('2021-11-12T18:52:59.0349748+00:00') 一样使用它。

【参考方案1】：

这是我根据 cmets 中建议的答案汇总的解决方案：

return this.http.get<MyClass>(restUrl,  observe: 'response' )
      .pipe(map(response => 
        if (response.ok) 
          response.body.expires = new Date(response.body.expires);
          this.setLoginResult(response.body);
        
        return response;
      ));