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
    }
}

其他

因为有用到 ref，所以有过下面的报错。
先看一下对应的.d.ts里的内容。

类型 "null" 到类型 "HTMLDivElement" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。

所以指定一下泛型，不要让类型推论自动推算就好：

const ref = useRef<HTMLDivElement>(null)

不能将类型“number | RefObject<HTMLDivElement>”分配给类型“RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined”。
  不能将类型“number”分配给类型“RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined”。

类型断言一下 as RefObject<HTMLDivElement> 就好了。

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