JavaScript/TypeScript前端与ASP.net Core 5后端传递日期对象的正确方式

问题原因确认 #

JSON原生不支持Date类型，ASP.NET Core默认会把DateTime/DateTimeOffset序列化为ISO 8601格式的字符串，Angular HttpClient默认反序列化时不会自动将该类字符串转换为Date对象，因此会出现类型不匹配的问题。

最优方案（全局自动适配，完全保留强类型） #

两端统一配置后可实现日期类型的自动序列化/反序列化，无需业务代码额外处理。

后端（ASP.NET Core 5）配置 #

首先建议优先使用DateTimeOffset替代DateTime，序列化后会自带时区偏移，避免前后端时区不一致导致的时间偏差。
显式配置序列化规则，确保输出标准ISO 8601格式的日期字符串：

使用默认System.Text.Json序列化器的配置

services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 配置DateTime序列化格式为带毫秒的UTC标准ISO 8601格式
        options.JsonSerializerOptions.Converters.Add(new JsonDateTimeConverter(
            "yyyy-MM-ddTHH:mm:ss.fffZ", 
            CultureInfo.InvariantCulture));
        // 如果使用DateTimeOffset，可添加对应转换器
        options.JsonSerializerOptions.Converters.Add(new JsonDateTimeOffsetConverter(
            "yyyy-MM-ddTHH:mm:ss.fffZ", 
            CultureInfo.InvariantCulture));
    });

使用Newtonsoft.Json序列化器的配置

services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.DateFormatHandling = DateFormatHandling.IsoDateFormat;
        options.SerializerSettings.DateTimeZoneHandling = DateTimeZoneHandling.Utc;
    });

前端（Angular）配置 #

通过Http拦截器全局处理所有接口返回值，自动将符合ISO 8601格式的字符串转换为Date对象：

1. 实现日期反序列化拦截器

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class DateDeserializationInterceptor implements HttpInterceptor {
  // ISO 8601格式日期正则匹配
  private readonly isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/;

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map(event => {
        if (event instanceof HttpResponse && event.body) {
          this.traverseAndConvertDates(event.body);
        }
        return event;
      })
    );
  }

  // 递归遍历对象转换日期字段
  private traverseAndConvertDates(obj: any): void {
    if (obj === null || typeof obj !== 'object') return;

    for (const key of Object.keys(obj)) {
      const value = obj[key];
      if (typeof value === 'string' && this.isoDateRegex.test(value)) {
        obj[key] = new Date(value);
      } else if (typeof value === 'object') {
        this.traverseAndConvertDates(value);
      }
    }
  }
}

2. 注册拦截器到根模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DateDeserializationInterceptor } from './date-deserialization.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: DateDeserializationInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成后，所有接口返回的日期字段都会自动转换为Date对象，你的TypeScript类定义无需任何修改，强类型特性完全保留。

次优方案（单接口手动转换） #

如果不想全局修改配置，可针对单个接口做单独转换：

方案1：接口调用时直接转换 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import { MyClass } from './my-class';

@Injectable({ providedIn: 'root' })
export class MyApiService {
  constructor(private http: HttpClient) {}

  getMyClassData(): Observable<MyClass> {
    return this.http.get<Omit<MyClass, 'expires'> & { expires: string }>('/api/your-endpoint').pipe(
      map(res => ({
        ...res,
        expires: new Date(res.expires)
      }))
    );
  }
}

方案2：给TypeScript类添加转换构造函数 #

export class MyClass {
  expires: Date;
  ticket: string;

  constructor(raw: { expires: string; ticket: string }) {
    this.expires = new Date(raw.expires);
    this.ticket = raw.ticket;
  }
}

// 调用时
return this.http.get<Parameters<typeof MyClass['constructor']>[0]>('/api/your-endpoint').pipe(
  map(res => new MyClass(res))
);

该方案无需全局配置，仅针对需要的接口处理，缺点是每个包含日期字段的接口都需要单独编写转换逻辑，重复代码较多。

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