为什么在这种情况下（TS）隐含的箭头功能“返回”不起作用？

Question

更新：

在这一点上，我跑完之后再也无法在本地复制

rm -rf node_mdoules/ && npm i

我将保留该问题，因为它对于遇到此错误的其他人可能很有用。在撰写本文时，该错误仍可在jsfiddle中重现。

如果有人找到可靠地对其进行复制的方法，请提供存储库，据我所知，一些热情的编码人员好奇地寻找其根本原因。

---

初始问题

我有这个JavaScript代码，可以正常工作：

const iconsMap = new Map([
  ['Roofs', 'roofs'],
  ['Walls', 'walls'],
  ['Windows & Doors', 'doors'],
  ['Heating & Controls', 'heating'],
  ['Ventilation & Air Tightness', 'ventilation'],
  ['Renewables', 'renewables'],
  ['Others', 'others'],
  ['Default', 'home'],
]);

console.log(
  Object.assign({}, ...Array.from(iconsMap).map(([label, fileName]) => ({[label]: fileName})))
);

我第一次尝试打字稿非常接近原始JS：

const iconsMap: Map<string, string> = new Map([
      ['Roofs', 'roofs'],
      ['Walls', 'walls'],
      ['Windows & Doors', 'doors'],
      ['Heating & Controls', 'heating'],
      ['Ventilation & Air Tightness', 'ventilation'],
      ['Renewables', 'renewables'],
      ['Others', 'others'],
      ['Default', 'home'],
    ]);
    
interface Dictionary<T> {
  [key: string]: T;
}

console.log(
  Object.assign(
    {} as Dictionary<string>,
    ...Array.from(iconsMap).map(
      ([label, fileName]) => ({ [label]: fileName })
    )
  )
);

但是它与：

VM325：13未捕获的语法错误：意外的令牌'（' 在新功能（） 在执行时（VM319 typescript.js：41）

由于某些原因，箭头功能return的隐含() => ({})在这里失败。我需要做() => { return {}; }。如此有效：

console.log(
  Object.assign(
    {} as Dictionary<string>,
    ...Array.from(iconsMap).map(([label, fileName]) => {
      return { [label]: fileName };
    })
  )
);

谁能解释为什么？

注意：：我对重写上述代码的其他方式不感兴趣（实际上是出于上下文而不是突出显示此问题）。我已经重新整理了整个内容，我使用的是.reduce()，对此我感到很满意。
对于奇怪的类型...爬行器，实际实现：

export const iconRegistry: Dictionary<string> = Array.from(iconsMap)
  .reduce((o, [label, fileName]) => ({
    ...o,
    [label]: require(`./assets/icons/measure/${fileName}.svg`)
  }), {} as Dictionary<string>);

但是我想了解为什么上面暗示的return失败。

感谢您抽出宝贵的时间。

Answer 1

您所编译的代码without any errors

更多

对于任何有效的JavaScript语法，如果将其复制粘贴到TypeScript文件中，就永远不会收到SyntaxError 。因为TypeScript is syntactically a strict superset of JavaScript syntax

Answer 2

您的TypeScript代码有效，并且至少在TS 3.9.2中已正确地转换为JS。看来是jsfiddle错误还是TS错误？他们在链接到的jsfiddle中使用TS 1.7.3，可以通过在devtools控制台中执行ts.version进行验证。

我在他们用来将TS转换为JS的脚本中添加了一个日志断点，如下所示：

var transpiled = ts.transpile.apply(ts, [param[0], param[1], "filename", diagnostics]);
new Function(transpiled)();

记录transpiled变量表明代码已转换为此：

var iconsMap = new Map([
    ['Roofs', 'roofs'],
    ['Walls', 'walls'],
    ['Windows & Doors', 'doors'],
    ['Heating & Controls', 'heating'],
    ['Ventilation & Air Tightness', 'ventilation'],
    ['Renewables', 'renewables'],
    ['Others', 'others'],
    ['Default', 'home'],
]);
console.log(Object.assign({}, ...Array.from(iconsMap).map(function ([label, fileName]) ({ [label]: fileName }))));

请注意，箭头功能已转换为：

function ([label, fileName]) ({ [label]: fileName })))

这当然是无效的。我建议您在vscode或ts-node中使用Quokka之类的东西，如果您想在本地游乐场尝试一些东西而不必设置东西，但是至少可以控制您尝试的TS版本