TypeScript自定义filter函数返回undefined及缺少return语句问题

问题原因 #

你遇到的undefined来自两个独立的语法错误： #

1. filter方法的回调函数没有返回值

你当前的调用写法：

.filter((service) => {
  filterOverlappedServices(service);
})

箭头函数用花括号包裹函数体时，必须显式写return才会返回计算结果，你现在没有加return，这个回调默认返回undefined，filter会把undefined判定为不满足条件，所有项都会被过滤掉。

正确的调用写法可以二选一：

• 省略花括号，单表达式默认返回结果：

.filter(service => filterOverlappedServices(service))

• 显式补充return语句：

.filter((service) => {
  return filterOverlappedServices(service);
})

2. 过滤函数本身缺失返回值

你编写的filterOverlappedServices函数中，if(bookings)分支用了forEach遍历：
forEach的回调函数里的return只会终止当前次的循环执行，不会给外层的filterOverlappedServices函数返回任何值，同时整个if(bookings)分支结束后没有外层的return语句，只要bookings存在，这个函数走完if分支后就没有返回值，默认返回undefined，和你声明的boolean返回类型不匹配，所以TypeScript抛出对应的错误。

另外你的需求是判断service时间是否落在任意一个booking的时间范围内，属于存在性判断，不需要用forEach，直接用Array.some()方法即可，修正后的过滤函数写法：

const filterOverlappedServices = (service: Item): boolean => {
    if (bookings) {
      // 只要有任意一个booking满足时间重叠条件就返回true，否则返回false
      return bookings.some((booking) => {
        return moment(service?.duration?.start).isBetween(
          booking.data[0]?.duration?.start,
          booking.data[0]?.duration?.end,
          'minute',
        );
      });
    } else {
      return true;
    }
  };

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