TypeScript 如何向HTML DOM元素扩展类型声明(附思路)

问题

因为在 div 上用到 scrollTop 属性,所以 ts 报了下面的错误,说某个类型上不存在 scrollTop 属性

不能将类型“{ children: Element[]; className: any; scrollTop: number; ref: RefObject; }”分配给类型“IntrinsicAttributes & Pick, HTMLDivElement>, "children" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }”。
  类型“IntrinsicAttributes & Pick, HTMLDivElement>, "children" | ... 253 more ... | "onTransitionEndCapture"> & { ...; }”上不存在属性“scrollTop”。

首先百度,但没有查到 ts 如何给 div 的声明增加一个属性。那只好自力更生了~
思路很简单,就是声明合并。

过程

从 div 进入到声明文件,可以看到。

HTMLDivElement,往下走,可以看到 HTMLDivElement 最后是有继承 scrollTop 属性的。

所以问题不在这里,进入 HTMLAttributes,可以发现,这里确实没有 scrollTop 属性的声明,要解决的就是这里了~

解决

最后加上下面的代码,就好了。

declare module 'react' {
    interface HTMLAttributes {
        scrollTop?: number
    }
}

最后虽然写出来就一点,思路也很简单。但因为初入ts,所以其实最上面的问题让我花费将近一天时间,才醒悟找到问题点,解决完成~

你可能感兴趣的:(TypeScript 如何向HTML DOM元素扩展类型声明(附思路))