如何正确管理TypeScript interface 处理前后端日期类型不匹配问题

完全不需要勉强用单个interface兼容两种类型，也不推荐定义date: string | Date这种联合类型，最优方案是定义两层interface区分传输层和业务层类型，配合统一的数据转换逻辑处理。 #

具体实现步骤 #

• 第一层定义传输层类型，完全对齐后端返回的原始JSON结构

  // 对应后端返回的原始响应结构，仅在请求处理层使用
  export interface RawFolder {
    name: string;
    id: number;
    date: string;
  }
  

• 第二层定义业务层类型，是前端业务代码中实际使用的结构

  // 全局业务代码通用的类型，date字段固定为Date类型
  export interface Folder {
    name: string;
    id: number;
    date: Date;
  }
  

• 在统一的请求封装层做自动转换，不要把转换逻辑散落在各个业务页面
  以axios封装为例，只需要在请求函数里做一次转换，业务侧拿到的直接是可用的Folder类型数据：

  // 原始数据转业务数据的转换函数
  function mapRawToFolder(raw: RawFolder): Folder {
    return {
      ...raw,
      date: new Date(raw.date)
    }
  }
  
  // 接口请求封装
  async function fetchFolderList(): Promise<Folder[]> {
    const { data } = await axios.get<RawFolder[]>('/api/folders');
    return data.map(mapRawToFolder);
  }
  

• 前端提交数据到后端时，同样在请求封装层做反向转换，把Date类型转成后端要求的字符串格式即可，业务代码全程不需要感知传输层的类型差异。

方案优势 #

• 类型边界清晰，不会出现业务代码中部分场景date是string、部分场景是Date的混乱问题
• 避免联合类型带来的大量重复类型判断逻辑，降低运行时出错概率
• 后续如果后端日期格式调整，只需要修改转换层一处代码即可，不需要改动业务逻辑

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