如何修复TypeScript自定义元素开发中HTMLElement构造函数报错：'new' is required

嘿，这个问题我之前也碰到过，其实是TypeScript编译配置导致的，咱们一步步来搞定它：

问题根源 #

你用TypeScript写的自定义元素类，当编译目标设为ES5时，TS会把class转成ES5风格的原型继承代码——也就是你看到的__extends函数和_super.call(this)这部分。但原生HTMLElement构造函数必须通过new关键字调用，用call/apply这种方式直接调用构造函数是不被允许的，所以就触发了这个错误。

解决方案 #

方案1：升级编译目标到ES6+ #

这是最简单直接的解决方式，因为ES6及以上支持原生class语法，TS编译后会直接保留原生的class继承逻辑，不会生成ES5的兼容代码。

修改你的tsconfig.json配置：

{
  "compilerOptions": {
    "target": "ES6", // 把编译目标设为ES6或更高版本
    "lib": ["ES6", "DOM"], // 必须包含DOM库，否则HTMLElement会报类型错误
    "module": "ES6",
    "strict": true
  }
}

重新编译后，生成的代码会和你写的TS代码几乎一致，用原生的super()调用父类构造函数，完全符合自定义元素的规范。

方案2：如果需要兼容ES5环境 #

如果你必须支持旧浏览器（比如IE11），那需要引入Web Components的垫片来修复ES5环境下原生构造函数的继承问题：

1. 安装垫片包：

npm install @webcomponents/webcomponentsjs --save

2. 在你的代码最顶部引入适配垫片：

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

这个垫片会改写原生构造函数的继承逻辑，让_super.call(this)这种ES5风格的调用能够正常工作。

小提示 #

你的自定义元素标签名loop-是合法的（自定义元素必须包含连字符），不过通常会写成更语义化的名字比如my-loop，这个不影响功能，只是个小建议~

内容的提问来源于stack exchange，提问作者ywbird