[Vue] Fix TypeScript issues

Author: 7-zete-7

src/Vue/Resources/assets/src/register_controller.ts

@@ -9,6 +9,16 @@
 
 'use strict';
 
+import type { Component } from 'vue';
+
+declare global {
+    function resolveVueComponent(name: string): Component;
+
+    interface Window {
+        resolveVueComponent(name: string): Component;
+    }
+}
+
 export function registerVueControllerComponents(context: __WebpackModuleApi.RequireContext) {
     const vueControllers: { [key: string]: object } = {};
 
@@ -19,7 +29,7 @@ export function registerVueControllerComponents(context: __WebpackModuleApi.Requ
     importAllVueComponents(context);
 
     // Expose a global Vue loader to allow rendering from the Stimulus controller
-    (window as any).resolveVueComponent = (name: string): object => {
+    window.resolveVueComponent = (name: string): object => {
         const component = vueControllers[`./${name}.vue`];
         if (typeof component === 'undefined') {
             throw new Error(`Vue controller "${name}" does not exist`);

src/Vue/Resources/assets/src/render_controller.ts

@@ -10,9 +10,9 @@
 'use strict';
 
 import { Controller } from '@hotwired/stimulus';
-import { App, Component, createApp } from 'vue';
+import { App, createApp } from 'vue';
 
-export default class extends Controller {
+export default class extends Controller<Element & { __vue_app__?: App<Element> }> {
     private props: Record<string, unknown> | null;
     private app: App<Element>;
     readonly componentValue: string;
@@ -28,7 +28,7 @@ export default class extends Controller {
 
         this._dispatchEvent('vue:connect', { componentName: this.componentValue, props: this.props });
 
-        const component: Component = window.resolveVueComponent(this.componentValue);
+        const component = window.resolveVueComponent(this.componentValue);
 
         this.app = createApp(component, this.props);
 

src/Vue/Resources/assets/test/register_controller.test.ts

@@ -18,7 +18,7 @@ require.context = createRequireContextPolyfill(__dirname);
 describe('registerVueControllerComponents', () => {
     it('test', () => {
         registerVueControllerComponents(require.context('./fixtures', true, /\.vue$/));
-        const resolveComponent = (window as any).resolveVueComponent;
+        const resolveComponent = window.resolveVueComponent;
 
         expect(resolveComponent).not.toBeUndefined();
         expect(resolveComponent('Hello')).toBe(Hello);

src/Vue/Resources/assets/test/render_controller.test.ts

@@ -38,7 +38,7 @@ const Hello = {
     props: ['name']
 };
 
-(window as any).resolveVueComponent = () => {
+window.resolveVueComponent = () => {
     return Hello;
 };