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

问题

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

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

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

过程

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

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

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

解决

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

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

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