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

Question

更新：

在这一点上，我不再能够在本地复制它，我跑了

rm -rf node_mdoules/ && npm i

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

如果有人找到一种可靠地复制它的方法，请提供一个 repo，因为我知道一些充满热情的编码人员好奇地寻找它的根本原因。

---

最初的问题

我有这个 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})))
);

我的第一次 Typescript 尝试非常接近原始 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 Uncaught SyntaxError: Unexpected token '(' at new Function () at exec (VM319 typescript.js:41)

由于某种原因，箭头 function () => ({})的隐含return在这里失败。 我需要做() => { return {}; } () => { return {}; } 。 所以这有效：

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

谁能解释为什么？

注意：我对重写上述代码的替代方法不感兴趣（它实际上是脱离上下文来突出问题的）。 我已经重写了整件事，我正在使用.reduce()并且我对它很满意。
对于好奇的类型......cripter，实际实现：

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

您编译的代码没有任何错误

更多的

对于任何有效的 JavaScript 语法，如果您只是将其复制粘贴到 TypeScript 文件，您将永远不会收到 SyntaxError 。 因为TypeScript 在语法上是 JavaScript 语法的严格超集

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 已转换为：

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

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