如何将含Date字段的原始JSON导入TypeScript自定义类型？

我尝试导入一份原始JSON数据文件，希望将其中的日期字符串转换为自定义类型中的Date对象，但遇到了类型不兼容的问题，想寻求更高效的解决办法。

类型定义 #

我的Client类型定义如下：

export type Client = {
    id: number;
    first_name: string;
    last_name: string;
    dob: Date;
}

原始JSON数据 #

client.json文件内容：

[{"id":1,"first_name":"Alasdair","last_name":"Kingman","dob":"1969-07-11"},
{"id":2,"first_name":"Ursulina","last_name":"Skellion","dob":"1986-01-08"}]

初始代码及错误 #

在client.ts中我写了以下导入代码：

import {Client} from "./model";
import clients_raw from "../mock-data/clients/clients.json" with {type: "json"}

const clients: Client[] = clients_raw as Client[];

但as类型断言触发了TypeScript错误：

TS2352: Conversion of type
....
Types of property dob are incompatible.
Type string is not comparable to type Date

现有方案的疑问 #

我知道可以通过遍历数组手动转换：

const clients: Client[] = clients_raw.map((client) : Client => {
    return {...client, dob: new Date(client.dob) }
});

但这种方法每次模块加载时都要遍历整个数组，担心效率问题。想问：有没有办法直接将该字段导入为Date对象？或者有没有更高效的替代方案？

解决方案说明 #

首先明确：无法直接将JSON中的日期字符串导入为Date对象。因为JSON规范里没有Date类型，所有日期都是以字符串形式存储的，TypeScript的JSON导入只会按原始类型解析，不会自动转换为Date。

关于你担心的遍历效率问题，其实不用过度焦虑：

• 对于大多数前端场景，mock数据的规模不会大到让遍历成为性能瓶颈，一次map操作的开销可以忽略不计。
• 模块只会在首次加载时执行一次转换，后续导入该模块时会直接复用缓存的结果，不会重复遍历。

优化后的可选方案 #

1. 惰性转换（按需转换）

只有当需要访问dob字段时才转换为Date，适合数据量大但很少用到日期字段的场景：

import { Client } from "./model";
import clients_raw from "../mock-data/clients/clients.json" with { type: "json" };

type RawClient = Omit<Client, "dob"> & { dob: string };

const clients: Client[] = clients_raw.map((client: RawClient) => {
  let _dob: Date | undefined;
  return {
    ...client,
    get dob() {
      if (!_dob) {
        _dob = new Date(client.dob);
      }
      return _dob;
    }
  };
});

这种方式下，dob会在第一次被访问时才完成转换，避免了初始化时一次性转换所有日期。

2. 预编译转换（构建时处理）

如果项目使用Webpack、Vite等构建工具，可以在构建阶段就将JSON中的日期字符串转换为Date对象，运行时无需再处理：
以Vite为例，编写自定义插件在解析JSON时自动转换指定字段：

// vite.config.js
export default {
  plugins: [
    {
      name: 'json-date-transform',
      transform(code, id) {
        if (id.endsWith('.json')) {
          return code.replace(/"dob":"(\d{4}-\d{2}-\d{2})"/g, '"dob":new Date("$1")');
        }
      }
    }
  ]
}

构建完成后，JSON中的dob字段已被转为Date对象，此时在TypeScript中可以直接断言为Client[]。

总结 #

• 直接导入时无法自动转换Date，必须手动处理；
• 常规的map转换在大多数场景下性能足够，且模块仅执行一次转换；
• 惰性转换或构建时转换是针对特殊场景的优化方案，按需选择即可。

内容的提问来源于stack exchange，提问作者Eric B.