TypeScript接口中new关键字含义及CustomElementConstructor类型约束问题

接口中 new 关键字的含义 #

接口里的new是构造签名语法，用来约束对应类型是可被new调用的构造函数。你给出的CustomElementConstructor接口定义，含义就是：符合该类型的对象，可以被new调用，调用时接受任意数量任意类型的参数，最终返回HTMLElement类型的实例。

CustomElementRegistry.define 的 constructor 参数约束 #

该参数被约束为CustomElementConstructor类型，也就是要求传入的是一个合法的、可构造出HTMLElement实例的构造函数。

示例代码报错&运行无效的原因 #

有两层原因：

• TypeScript 层面：类的constructor不允许显式声明返回值为非类自身实例的类型。constructor的返回值默认就是当前类的实例类型，你手动标注返回HTMLElement本身就不符合TypeScript的类型校验规则。
• 运行规范层面：浏览器原生customElements.define要求传入的构造函数必须是HTMLElement的子类，不是仅在constructor里返回一个HTMLElement实例就可以满足要求的，这是代码运行无效的核心原因。

正确写法示例 #

class X extends HTMLElement {
  constructor() {
    super();
    // 可在此添加自定义元素初始化逻辑
  }
}

customElements.define("hi", X);

这种写法完全符合接口约束：继承HTMLElement的类被new调用时，返回的实例本身就是HTMLElement类型，匹配CustomElementConstructor的构造签名要求。

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