Merge pull request #181 from wellyshen/refactor-better-type-dx

Refactor: simplify generic type setup

.changeset/itchy-dogs-leave.md

@@ -0,0 +1,5 @@
+---
+"react-cool-virtual": patch
+---
+
+refactor: simplify generic type setup

README.md

@@ -1333,12 +1333,29 @@ const Grid = () => {
 
 ### Working in TypeScript
 
-React Cool Virtual is built with [TypeScript](https://www.typescriptlang.org), you can tell the hook what type of your **outer** and **inner** elements are as follows:
+React Cool Virtual is built with [TypeScript](https://www.typescriptlang.org), you can tell the hook what type of your **outer** and **inner** elements are as follows.
+
+If the outer element and inner element are different types:
 
 ```tsx
 const App = () => {
   // 1st is the `outerRef`, 2nd is the `innerRef`
-  const { outerRef, innerRef } = useVirtual<HTMLDivElement, HTMLDivElement>();
+  const { outerRef, innerRef } = useVirtual<HTMLDivElement, HTMLUListElement>();
+
+  return (
+    <div ref={outerRef}>
+      <ul ref={innerRef}>{/* Rendering items... */}</ul>
+    </div>
+  );
+};
+```
+
+If the outer element and inner element are same types:
+
+```tsx
+const App = () => {
+  // By default, the `innerRef` will refer to the type of the `outerRef`
+  const { outerRef, innerRef } = useVirtual<HTMLDivElement>();
 
   return (
     <div ref={outerRef}>

src/types/react-cool-virtual.d.ts

@@ -115,7 +115,7 @@ declare module "react-cool-virtual" {
 
   export interface Return<
     O extends HTMLElement = HTMLElement,
-    I extends HTMLElement = HTMLElement
+    I extends HTMLElement = O
   > {
     outerRef: MutableRefObject<O | null>;
     innerRef: MutableRefObject<I | null>;
@@ -126,6 +126,6 @@ declare module "react-cool-virtual" {
 
   export default function useVirtual<
     O extends HTMLElement = HTMLElement,
-    I extends HTMLElement = HTMLElement
+    I extends HTMLElement = O
   >(config: Options): Return<O, I>;
 }

src/useVirtual.ts

@@ -46,7 +46,7 @@ const getInitItems = (itemSize: ItemSize, ssrItemCount?: SsrItemCount) => {
 
 export default <
   O extends HTMLElement = HTMLElement,
-  I extends HTMLElement = HTMLElement
+  I extends HTMLElement = O
 >({
   itemCount,
   ssrItemCount,