AntDesign 3.x中Momentjs升级：官网指南失效的解决方法

一、升级 Moment 至最新版本 #

1. 卸载旧版本 Moment

   npm uninstall moment
   # 或使用 yarn
   yarn remove moment
   

2. 安装最新版本 Moment

   npm install moment@latest
   # 或使用 yarn
   yarn add moment@latest
   

3. 强制锁定依赖版本（解决 AntD 3.x 内置版本限制）
   • 若使用 npm，在 package.json 中添加 overrides 字段：

     "overrides": {
       "moment": "^2.29.4" // 替换为当前最新版本号
     }
     

   • 若使用 yarn，在 package.json 中添加 resolutions 字段：

     "resolutions": {
       "moment": "^2.29.4"
     }
     

4. 重新安装依赖

   npm install
   # 或使用 yarn
   yarn install
   

二、解决 DatePicker/RangePicker TypeScript 类型冲突报错 #

由于 AntD 3.x 的日期组件与内置 Moment 类型绑定，外部高版本 Moment 会导致类型不兼容，可通过以下方式解决：

方法1：使用类型断言 #

在传递 value 属性时，显式断言类型：

import moment from 'moment';
import { DatePicker } from 'antd';

// 示例代码
const [date, setDate] = useState<moment.Moment | null>(null);

<DatePicker 
  value={date as moment.Moment} 
  onChange={(value) => setDate(value)} 
/>

方法2：扩展 TypeScript 类型声明 #

1. 在项目根目录创建 typings/moment.d.ts 文件，内容如下：

   declare module 'moment' {
     export interface Moment extends import('moment').Moment {}
   }
   

2. 在 tsconfig.json 中配置包含该类型文件：

   "include": [
     "src",
     "typings"
   ]
   

方法3：统一 Moment 实例 #

确保项目中所有导入 Moment 的地方都使用同一个版本，避免因多版本安装导致的类型差异。

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