typescript - 如何修复错误 TS2339 - 'HTMLElement' 上不存在属性

Question

当我按下“下一步”按钮时，会触发下面的代码，执行所需的操作(如果需要，滚动到我的元素)。

但是出现此错误:错误TS2339:“HTMLElement”类型上不存在属性“scrollIntoViewIfNeeded”。并且我无法构建我的项目。

const h3Title = ref<HTMLElement | null>(null)

function nextStep(
  currentStep.value++;
  
  if (h3Title.value) {
    h3Title.value.scrollIntoViewIfNeeded({behavior: "smooth", block: "start"})
  }

Answer 1

我认为 h3Title.value.scrollIntoView({block: "nearest"}) 使用标准的scrollIntoView属性可以实现你想要的(如果元素已经在 View 中则不滚动)。

如果您确实希望 typescript 识别非标准的scrollIntoViewIfNeeded属性，您可以将其添加到HTMLElement接口(interface)(或创建扩展HTMLElement的新接口(interface)):

// global.d.ts
interface HTMLElement {
  scrollIntoViewIfNeeded?: any;
}

或者:将 h3Title.value 转换为 any 类型

(h3Title.value as any).scrollIntoViewIfNeeded()