修复错误TS2339 - 在'HTMLElement'上不存在属性的方法

Question

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

但是出现此错误：错误TS2339：属性'scrollIntoViewIfNeeded'在类型'HTMLElement'.上不存在，我无法构建我的项目。

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属性可以实现你想要的（如果元素已经在视图中则不滚动）。

如果您确实希望打字稿识别非标准的scrollIntoViewIfNeeded属性，您可以将其添加到HTMLElement接口（或创建扩展HTMLElement的新接口）：

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

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

(h3Title.value as any).scrollIntoViewIfNeeded()