创建javascript事件侦听器

我试图理解以下代码并将其转换为JavaScript，我猜它是用TypeScript编写的，所以我试图理解它在做什么

addEventListener("direct-upload:initialize", event => {
  const { target, detail } = event
  const { id, file } = detail
  target.insertAdjacentHTML("beforebegin", `
    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
      <span class="direct-upload__filename">${file.name}</span>
    </div>
  `)
})

---

然后我就迷路了。如果有人能向我解释一下上面的代码在做什么，我将不胜感激。这不是TypeScript，而是JavaScript。具体来说，它是一种JavaScript，使用ES2015规范中的箭头函数、解构赋值、常量、模板文本以及依赖自动分号插入的功能。这些ES2015功能适用于最新的现代浏览器Chrome、Firefox、Safari和Edge；它们不适用于IE的任何版本。请查看它们的详细信息，并与ES5及更早版本进行对比。您也可以使用将ES2015+代码转换为ES5，尽管它可能依赖于polyfills

在ES5和早期版本中，它看起来像这样：

addEventListener("direct-upload:initialize", function(event) {
  var target = event.target;
  var detail = event.detail;
  var id = detail.id;
  var file = detail.file;
  target.insertAdjacentHTML("beforebegin",
    '<div id="direct-upload-' + id + '" class="direct-upload direct-upload--pending">' +
      '<div id="direct-upload-progress-' + id + '" class="direct-upload__progress" style="width: 0%"></div>' +
      '<span class="direct-upload__filename">' + file.name + '</span>' +
    '</div>'
  );
});

const { target, detail = {id, file} } = event;

…可以这样写：

addEventListener("direct-upload:initialize", function(event) {
  var target = event.target;
  var detail = event.detail;
  var id = detail.id;
  var file = detail.file;
  target.insertAdjacentHTML("beforebegin",
    '<div id="direct-upload-' + id + '" class="direct-upload direct-upload--pending">' +
      '<div id="direct-upload-progress-' + id + '" class="direct-upload__progress" style="width: 0%"></div>' +
      '<span class="direct-upload__filename">' + file.name + '</span>' +
    '</div>'
  );
});

const { target, detail = {id, file} } = event;

---

…因为除了获取id和文件外，细节不用于任何其他用途。

它不是TypeScript，而是纯Javascript，但具有诸如=>和const.Thank@AndroidNoobie之类的ES6功能