Improve typing for Vue

inokawa · Dec 29, 2023 · 9782943 · 9782943
1 parent ca639e3
commit 9782943
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/src/vue/ListItem.tsx b/src/vue/ListItem.tsx
@@ -1,5 +1,5 @@
 /** @jsxImportSource vue */
-import { ref, defineComponent, watch } from "vue";
+import { ref, defineComponent, watch, StyleValue, PropType, VNode } from "vue";
 import { ItemResizeObserver } from "../core/resizer";
 import { isRTLDocument } from "../core/environment";
 
@@ -8,8 +8,8 @@ import { isRTLDocument } from "../core/environment";
  */
 export const ListItem = /*#__PURE__*/ defineComponent({
   props: {
-    _children: { type: Object, required: true },
-    _resizer: { type: Object, required: true },
+    _children: { type: Object as PropType<VNode>, required: true },
+    _resizer: { type: Object as PropType<ItemResizeObserver>, required: true },
     _index: { type: Number, required: true },
     _offset: { type: Number, required: true },
     _hide: { type: Boolean },
@@ -23,10 +23,7 @@ export const ListItem = /*#__PURE__*/ defineComponent({
     watch(
       () => elementRef.value && props._index,
       (_, __, onCleanup) => {
-        const cleanupObserver = (props._resizer as ItemResizeObserver)(
-          elementRef.value!,
-          props._index
-        );
+        const cleanupObserver = props._resizer(elementRef.value!, props._index);
         onCleanup(cleanupObserver);
       },
       {
@@ -43,7 +40,7 @@ export const ListItem = /*#__PURE__*/ defineComponent({
         _isHorizontal: isHorizontal,
       } = props as Omit<typeof props, "_element"> & { _element: "div" };
 
-      const style: Record<string, number | string> = {
+      const style: StyleValue = {
         margin: 0,
         padding: 0,
         position: "absolute",
@@ -54,7 +51,7 @@ export const ListItem = /*#__PURE__*/ defineComponent({
         visibility: hide ? "hidden" : "visible",
       };
       if (isHorizontal) {
-        style["display"] = "flex";
+        style.display = "flex";
       }
 
       return (

diff --git a/src/vue/VList.tsx b/src/vue/VList.tsx
@@ -93,7 +93,7 @@ export const VList = /*#__PURE__*/ defineComponent({
     const isHorizontal = props.horizontal;
     const rootRef = ref<HTMLDivElement>();
     const store = createVirtualStore(
-      props.data!.length,
+      props.data.length,
       props.initialItemSize ?? 40,
       undefined,
       undefined,
@@ -137,7 +137,7 @@ export const VList = /*#__PURE__*/ defineComponent({
     });
 
     watch(
-      () => props.data!.length,
+      () => props.data.length,
       (count) => {
         store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, props.shift]);
       }
@@ -184,7 +184,7 @@ export const VList = /*#__PURE__*/ defineComponent({
     return () => {
       rerender.value;
 
-      const count = props.data!.length;
+      const count = props.data.length;
 
       const [startIndex, endIndex] = store._getRange();
       const scrollDirection = store._getScrollDirection();
@@ -204,7 +204,7 @@ export const VList = /*#__PURE__*/ defineComponent({
 
       const items: VNode[] = [];
       for (let i = overscanedStartIndex; i <= overscanedEndIndex; i++) {
-        const e = slots.default(props.data![i]!)[0]!;
+        const e = slots.default(props.data![i]!)[0]! as VNode
         const key = e.key;
         items.push(
           <ListItem