Angular 8 TypeScript中如何为Moment类型赋值？解决类型报错

这个报错是TypeScript严格类型检查导致的——你不能直接把字符串类型的值赋值给moment.Moment类型的属性，必须先把字符串转换成Moment实例才行。下面给你分场景说明具体的解决方法：

1. 先确认依赖安装正确 #

首先确保你已经安装了moment库和对应的TypeScript类型定义：

npm install moment @types/moment --save

然后在使用的文件里导入moment：

import * as moment from 'moment';

2. 手动创建Address实例时的正确写法 #

你代码里用moment('20.02.2018 09:19')的思路是对的，但强烈建议指定日期格式，避免moment因为解析歧义出错（比如不同地区对2/5/2019的理解可能不同）。修改后的代码如下：

export class Address {
  fullName: string;
  mailingAddress: string;
  phoneNumber: string;
  emailAddress: string;
  dateStart?: moment.Moment;
  dateEnd?: moment.Moment;
}

// 正确创建实例
this.address = [
  {
    fullName: "John Smith",
    mailingAddress: "Oak Street",
    phoneNumber: "742-351-4195",
    emailAddress: "JohnSmith@gmail.com",
    dateStart: moment('20.02.2018 09:19', 'DD.MM.YYYY HH:mm'), // 指定格式
    dateEnd: moment('20.09.2018 09:19', 'DD.MM.YYYY HH:mm')
  }
];

3. 从API/后端获取字符串日期时的转换 #

如果你的日期数据是从后端接口返回的字符串（比如"dateStart":"2/5/2019"），需要先遍历数据，把字符串日期转换成Moment实例再赋值：

// 假设apiResponse是后端返回的原始数据数组
const apiResponse = [
  {
    fullName: "John Smith",
    mailingAddress: "Oak Street",
    phoneNumber: "742-351-4195",
    emailAddress: "JohnSmith@gmail.com",
    dateStart: "2/5/2019",
    dateEnd: "2/10/2019"
  }
];

// 转换后赋值给address
this.address = apiResponse.map(item => ({
  ...item,
  // 处理可选属性：如果有值就转换，否则保持undefined
  dateStart: item.dateStart ? moment(item.dateStart, 'M/D/YYYY') : undefined,
  dateEnd: item.dateEnd ? moment(item.dateEnd, 'M/D/YYYY') : undefined
}));

4. 表单输入场景的转换 #

如果是用户在表单里输入的字符串日期，同样需要用moment转换后再赋值给Address实例：

const newAddress: Address = {
  fullName: "Jane Doe",
  mailingAddress: "Pine Avenue",
  phoneNumber: "123-456-7890",
  emailAddress: "JaneDoe@example.com",
  dateStart: moment('2024-01-01', 'YYYY-MM-DD'),
  dateEnd: undefined // 可选属性可以不赋值
};

this.address.push(newAddress);

关键注意点 #

• 始终指定日期格式：这能避免moment因地区或格式歧义解析出错误的日期。
• 处理可选值：因为你的dateStart和dateEnd是可选属性，转换前要判断是否有值，否则传递undefined给moment会创建一个当前时间的实例，这可能不是你想要的。
• 类型检查：如果还是报错，检查你的tsconfig.json里是否开启了严格类型检查，确保@types/moment已经被正确识别。

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