Angular 5迁移中如何用TypeScript遍历moment-range的by方法返回值？

我来帮你搞定这个迁移中的遍历问题！从原来的AngularJS/Ionic 1的JavaScript写法转到TypeScript后，moment-range的by()方法返回的是Iterable<moment.Moment>类型，不过有几种简单的方式来遍历它，完全可以替代原来的回调写法：

方法1：使用for...of循环（最符合TypeScript风格） #

这是遍历Iterable对象最直接的方式，语法清晰且原生支持：

const range: momentRange.DateRange = new momentRange.DateRange(new Date(2018, 0, 11), new Date(2018, 11, 30));

for (const day of range.by('days')) {
  // 在这里处理每一天，比如格式化输出
  console.log(day.format('YYYY-MM-DD'));
  // 你的业务逻辑代码
}

方法2：转换为数组后使用forEach #

如果习惯了数组的forEach方法，可以用Array.from()把Iterable转换成数组：

const range: momentRange.DateRange = new momentRange.DateRange(new Date(2018, 0, 11), new Date(2018, 11, 30));
const daysArray = Array.from(range.by('days'));

daysArray.forEach(day => {
  // 处理每一天的逻辑
  console.log(day.format('YYYY-MM-DD'));
});

方法3：沿用类似原JS的回调写法 #

其实moment-range的TypeScript定义里，by()方法还有支持回调的重载版本，你可以直接像原来那样写：

const range: momentRange.DateRange = new momentRange.DateRange(new Date(2018, 0, 11), new Date(2018, 11, 30));

range.by('days', (day) => {
  // 这里的处理逻辑和你原来的JS代码完全一致
  console.log(day.format('YYYY-MM-DD'));
});

这三种方法都能实现你原来的需求，选哪种取决于你的代码习惯～

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