feat(api/ts): Use narrower types for component refs (closes #11483)

[yusufkandemir]

What kind of change does this PR introduce?

• Feature

Does this PR introduce a breaking change?

• No

The PR fulfills these requirements:

• It's submitted to the dev branch
• The related issue is referenced in the PR's title

Other information:
Closes #11483.

📜 Changes for dist/types/index.d.ts

@@ -4774,9 +4774,9 @@
     file: File;
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
   /**
    * Override default selection slot; Suggestion: QChip
    * @param scope
@@ -4788,9 +4788,9 @@
     files: FileList | any[];
     /**
      * Reference to the QFile component
      */
-    ref: LooseDictionary;
+    ref: QFile;
   }) => VNode[];
 }
 
 export interface QFile extends ComponentPublicInstance<QFileProps> {
@@ -4910,9 +4910,9 @@
   /**
    * Emitted after a validation was triggered and at least one of the inner Quasar components models are NOT valid
    * @param ref Vue reference to the first component that triggered the validation error
    */
-  onValidationError?: (ref: LooseDictionary) => void;
+  onValidationError?: (ref: Component) => void;
 }
 
 export interface QFormSlots {
   /**
@@ -7492,9 +7492,9 @@
   onScroll?: (info: {
     /**
      * Vue reference to the QScrollArea which triggered the event
      */
-    ref: LooseDictionary;
+    ref: QScrollArea;
     /**
      * Vertical scroll position (in px)
      */
     verticalPosition: number;
@@ -7540,9 +7540,9 @@
   /**
    * Get the scrolling DOM element target
    * @returns DOM element upon which scrolling takes place
    */
-  getScrollTarget: () => LooseDictionary;
+  getScrollTarget: () => Element;
   /**
    * Get the current scroll information
    * @returns Scroll information
    */
@@ -8130,11 +8130,11 @@
      * Direction of change
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QSelect
      */
-    ref: LooseDictionary;
+    ref: QSelect;
   }) => void;
   /**
    * When using the 'clearable' property, this event is emitted when the clear icon is clicked
    * @param value The previous value before clearing it
@@ -8194,12 +8194,9 @@
    * @param abortFn Call this function if something went wrong
    */
   onFilter?: (
     inputValue: string,
-    doneFn: (
-      callbackFn: () => void,
-      afterFn?: (ref: LooseDictionary) => void
-    ) => void,
+    doneFn: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
     abortFn: () => void
   ) => void;
   /**
    * Emitted when a filtering was aborted; Probably a new one was requested?
@@ -12285,9 +12282,9 @@
     ticked: boolean;
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
     node: LooseDictionary;
@@ -12319,9 +12316,9 @@
     ticked: boolean;
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
     node: LooseDictionary;
@@ -12353,9 +12350,9 @@
     ticked: boolean;
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
     node: LooseDictionary;
@@ -12387,9 +12384,9 @@
     ticked: boolean;
     /**
      * QTree instance
      */
-    tree: LooseDictionary;
+    tree: QTree;
     /**
      * Node object
      */
     node: LooseDictionary;
@@ -12848,11 +12845,11 @@
      * Direction of change
      */
     direction: "increase" | "decrease";
     /**
-     * Vue reference to the QVirtualList which triggered the event
+     * Vue reference to the QVirtualScroll
      */
-    ref: LooseDictionary;
+    ref: QVirtualScroll;
   }) => void;
 }
 
 export interface QVirtualScrollSlots {
@@ -13143,9 +13140,9 @@
   transitionHide?: string;
   /**
    * Use custom dialog component; use along with 'componentProps' prop where possible
    */
-  component?: any;
+  component?: Component;
   /**
    * User defined props which will be forwarded to underlying custom component if 'component' prop is used
    */
   componentProps?: LooseDictionary;

[rstoenescu]

Good work!