如何将JavaScript高阶函数改写为符合TypeScript规范的代码

类型标注和实际数据结构不匹配：代码声明入参arr为string[]（字符串数组），遍历回调中item也被标注为string类型，但实际逻辑里访问了item.contracts属性，字符串类型不存在该属性，因此触发TS类型错误。

首先定义和业务数据匹配的TS类型，替换错误的string类型标注，修正后代码如下：

// 定义合同结构
interface Contract {
  startDate: string | number | Date;
  endDate: string | number | Date;
}
// 定义数组元素结构
interface ListItem {
  contracts: Contract[];
}

const filterFunction = (arr: ListItem[]) => {
  const today = new Date();
  return arr.filter((item) => {
    // 增加边界判断，避免contracts为空时抛出运行时错误
    if (!Array.isArray(item.contracts) || item.contracts.length === 0) {
      return false;
    }
    const startDate = new Date(item.contracts[0].startDate);
    const endDate = new Date(item.contracts[0].endDate);
    return startDate <= today && today <= endDate;
  });
};

export default filterFunction;

• 新增Contract、ListItem类型声明，和代码中实际操作的对象结构对齐
• 将入参arr的类型从错误的string[]修改为ListItem[]，匹配数组实际存储的对象类型
• 移除回调中item的手动string类型标注，TS会基于数组类型自动推导item类型，避免手动标注错误
• 增加数组合法性校验，避免contracts不存在或为空时访问下标触发运行时异常

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