“元素”类型上不存在角度属性“偏移宽度”

Posted 2023-03-07

【中文标题】“元素”类型上不存在角度属性“偏移宽度”

【英文标题】：Angular Property 'offsetWidth' does not exist on type 'Element'

【发布时间】：2020-11-25 16:31:00

【问题描述】：

Angular 新手，我正在尝试使用 ScrollTrigger 进行水平滚动。

它可以工作，但是当我服务或构建时，我得到了错误： “元素”类型上不存在属性“offsetWidth”。

这是 gsap 的代码：

gsap.to(sections, 
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: 
    trigger: ".panel-container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".panel-container").offsetWidth
  
);

即使我收到错误，它也可以工作，当我在控制台记录“document.query..”时，我得到了元素的良好宽度。

但错误阻止我构建。 我已经完成了演员阵容，首先是：

let myElem = document.querySelector(".panel-container").offsetWidth as htmlElement;

或之前，但这不起作用，我有红色下划线和错误消息： 将 'string' 类型转换为 'HTMLElement' 类型可能是一个错误，因为这两种类型都没有与另一种充分重叠。

我的 Angular 项目是 10.0.5。

在回复中尝试了解决方案：

(document.querySelector(".panel-container") as HTMLElement).offsetWidth;

但红色下划线出现此错误，但我发球时控制台中没有。

将“Element”类型转换为“HTMLElement”类型可能是一个错误，因为这两种类型都没有与另一种充分重叠。如果这是故意的，请先将表达式转换为“未知”。 “Element”类型缺少“HTMLElement”类型中的以下属性：accessKey、accessKeyLabel、autocapitalize、dir 和 105 more.ts(2352)

【问题讨论】：

你必须像(document.querySelector(".panel-container") as HTMLElement).offsetWidth这样写，否则你告诉TS使用offsetWidth作为HTMLElement，这是行不通的。

Ty，我编辑回复时出现错误，因为回复中没有足够的字符^^

也在这里检查，这描述了另一种解决方案：github.com/microsoft/TypeScript/issues/34694

【参考方案1】：

尝试输入来自querySelector 的预期输出。

即：

document.querySelector<HTMLElement>(".panel-container").offsetWidth

【讨论】：

是 在这里用作泛型吗？

【参考方案2】：

结果可以为空，所以如果你启用了strictNullChecks，你需要先执行一个空检查：

如果（元素！== null） ...