TypeScript方法优化问题：精简renameJson后编译报错求解答

你遇到的是箭头函数语法的常见坑，咱们一步步拆解问题出在哪：

错误原因 #

你的renameJson2里，reduce的回调箭头函数直接写了{ ...s, [...] : ... }，但JavaScript/TypeScript会把箭头函数里的第一个{当成函数体的开始标记，而不是对象字面量的开头。这就导致里面的对象展开语法...s和计算属性语法[...]都变成了无效的语句，编译器自然会报错。

另外，你用花括号包裹内容后，也没有写return语句——如果用花括号定义箭头函数的函数体，必须显式return要返回的对象；如果不想写return，就得用括号把对象字面量包起来，明确告诉编译器这是要返回的对象，不是函数体。

修复后的代码 #

方案一：用括号包裹对象字面量（无需显式return） #

public renameJson2(json: any): any {
  return Object.keys(json).reduce(
    (s, item) => ({
      ...s,
      [this.isUpperCase(item.charAt(1)) ? item.toLowerCase() : this.getFirstLetterToLowerCase(item)]: this.getTransform(json[item])
    }), 
    {}
  );
}

方案二：显式添加return语句 #

如果你习惯用花括号包裹函数体，也可以明确加上return：

public renameJson2(json: any): any {
  return Object.keys(json).reduce(
    (s, item) => {
      return {
        ...s,
        [this.isUpperCase(item.charAt(1)) ? item.toLowerCase() : this.getFirstLetterToLowerCase(item)]: this.getTransform(json[item])
      };
    }, 
    {}
  );
}

额外可读性优化建议 #

你的优化思路非常棒（提取重复逻辑、合并对象操作），可以再进一步把属性名的计算逻辑抽成变量，让代码更清晰：

public renameJson2(json: any): any {
  return Object.keys(json).reduce((s, item) => {
    // 把属性名计算逻辑单独拎出来，可读性更高
    const targetPropName = this.isUpperCase(item.charAt(1)) 
      ? item.toLowerCase() 
      : this.getFirstLetterToLowerCase(item);
    return {
      ...s,
      [targetPropName]: this.getTransform(json[item])
    };
  }, {});
}

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