如何为TypeScript的HTMLElement接口添加自定义属性类型？

为什么必须加可选标记？ #

当你定义IMyInterface继承HTMLElement并要求someRandomThing为必填string时，TypeScript会严格校验类型兼容性。document.createElement("div")返回的原生HTMLElement类型本身并不包含someRandomThing属性，无法满足你接口的必填要求，因此触发TS2741错误。

加上可选标记?后，someRandomThing变为可选属性——意味着该属性可存在也可不存在，原生div元素的类型就与你的接口兼容了，错误自然消失。

代码示例：

// 报错写法：必填属性不匹配原生类型
interface IMyInterface extends HTMLElement {
  someRandomThing: string;
}
const myDiv: IMyInterface = document.createElement("div"); // TS2741错误

// 正确写法：可选属性兼容原生类型
interface IMyInterface extends HTMLElement {
  someRandomThing?: string;
}
const myDiv: IMyInterface = document.createElement("div"); // 无错误

能不能直接修改lib.dom.d.ts？ #

不建议直接修改TypeScript自带的lib.dom.d.ts文件，原因有两点：

1. 每次更新TypeScript版本时，该文件会被官方版本覆盖，你的自定义修改会丢失；
2. 团队协作场景下，其他成员的开发环境没有这个修改，会出现类型校验不一致的问题。

正确的做法是利用TypeScript接口合并特性，在你自己的代码文件中扩展HTMLElement接口：

declare global {
  interface HTMLElement {
    someRandomThing?: string; // 可根据需求设置为必填或可选
  }
}

// 后续直接使用div的该属性不会触发TS2339错误
const myDiv = document.createElement("div");
myDiv.someRandomThing = "test content";

这种方式不会修改原库文件，TypeScript会自动将你扩展的接口与原生HTMLElement接口合并，实现全局生效的类型扩展。

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