为什么在这种情况下（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 '(' 在新函数 () 在 exec (VM319 typescript.js:41)

由于某种原因，箭头函数() => ({}) 的隐含return 在此处失败。我需要做() => { return {}; }。所以这行得通：

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

谁能解释一下原因？

注意：我对重写上述代码的替代方法不感兴趣（实际上是断章取义以突出问题）。我已经重写了整个内容，我正在使用.reduce()，我对此感到非常满意。
对于好奇的类型... cript，实际实现：

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 版本。