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

编程问答 2022-08-16

问题描述

更新：

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

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',]);
    
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>,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失败。

感谢您抽出宝贵的时间。

解决方法

您所编译的代码without any errors

enter image description here

更多

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

,

您的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版本

arrow-functionsjavascripttypescripttypescript