TypeScript报错：HTMLStyleElement无styleSheet属性，需指定何种类型？

问题根源在于styleSheet是IE专属的非标准DOM属性，TypeScript的标准DOM类型定义里并没有包含它，因此会触发类型校验错误。

解决方案1：局部类型断言 #

直接对创建的style元素做类型断言，补充styleSheet属性的定义：

var newstyle = document.createElement("style") as HTMLStyleElement & { styleSheet?: { cssText: string }; };
newstyle.setAttribute('data-scoped-style-for', id);
var csses = scoper(css, prefix);
if (newstyle.styleSheet){
    newstyle.styleSheet.cssText = csses;
} else {
    newstyle.appendChild(document.createTextNode(csses));
}

这种方式适合仅在单个代码块中使用该属性的场景，无需额外配置。

解决方案2：全局类型扩展 #

如果项目中多处需要用到styleSheet属性，可以在项目根目录下创建一个global.d.ts文件，扩展HTMLStyleElement的全局类型：

interface HTMLStyleElement {
  styleSheet?: {
    cssText: string;
  };
}

TypeScript会自动识别这个全局类型声明，之后所有HTMLStyleElement实例都能直接使用styleSheet属性，无需每次断言。

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