TypeScript使用Array reduce时如何避免参数不匹配与多余参数报错

你遇到的报错并非是需要声明全所有reduce回调参数，本质是两个核心逻辑缺失：

• 未给reduce传入初始累加值：Array.prototype.reduce如果省略第二个参数，第一次迭代的累加器会取原数组的第0项（也就是你的第一个field对象），本身不是数组，调用push自然会触发类型错误
• reduce回调未返回累加值：每次处理完数组项后，必须把更新后的累加器返回，否则下一次迭代的acc会变成undefined，直接触发后续执行报错
  另外你的JSX属性写法还有一个常见错误：<option value="{field.name}">会把value设置为固定字符串field.name，而非变量对应的值，需要改成不带外层引号的大括号表达式写法。

你完全不需要声明用不到的previousVal、currentIndex这类参数：MDN上列出的4个回调参数是全量可用的参数列表，不是必须全部声明的要求。JS/TS的回调参数是按位置匹配的，你只需要声明用到的前两个参数即可，后续多传入的参数不会进入作用域，自然也不会触发linter的未使用参数警告。

修正后的reduce代码如下：

const optionList = layerFields.reduce((acc, field) => {
  if (isValid(field)) {
    acc.push(
      <option value={field.name}>
        {field.alias}
      </option>
    );
  }
  // 必须返回更新后的累加器
  return acc;
// 必须传入初始空数组，明确acc的类型为option元素数组
}, []);

你的需求本质是「过滤合法字段+映射为DOM元素」，用filter+map的组合可读性更强，也不会出现reduce容易踩的初始值、返回值坑：

const optionList = layerFields
  .filter(field => isValid(field))
  .map(field => (
    <option value={field.name}>
      {field.alias}
    </option>
  ));

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