TypeScript如何声明style.position为absolute的HTMLElement类型？

可以实现，直接使用TypeScript的交叉类型组合两个约束即可。

正确的类型定义 #

你需要的参数类型是同时满足「是HTMLElement实例」和「style.position为absolute字面量」的交叉类型：

// 直接把两个约束用 & 连接即可
const testFunc = (arg: HTMLElement & { style: { position: 'absolute' } }) => {};

校验效果说明 #

这个类型完全匹配你期望的三个校验规则：

• 已设置position: absolute的HTMLElement实例：符合两个约束，校验通过
• 未设置absolute定位的HTMLElement实例：style.position不符合字面量要求，校验不通过
• 手动构造的仅包含style.position的普通对象：不属于HTMLElement实例，校验不通过

补充说明 #

TypeScript默认不会跟踪style属性的赋值来自动收窄元素类型，直接给元素赋值position = 'absolute'后，TS不会自动识别类型符合要求，你可以通过类型守卫解决这个问题：

// 类型守卫函数，用来运行时判断同时收窄类型
function isAbsoluteElement(el: unknown): el is HTMLElement & { style: { position: 'absolute' } } {
  return el instanceof HTMLElement && el.style.position === 'absolute';
}

// 使用示例
const truthyElem = document.createElement('div');
truthyElem.style.position = 'absolute';
if (isAbsoluteElement(truthyElem)) {
  testFunc(truthyElem); // 自动通过校验，无需额外类型断言
}

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