vue3 typescript 全局变量

在Vue3中使用TypeScript定义全局变量可以通过以下步骤实现：

1. 在项目根目录下创建`typings`文件夹，然后在`typings`文件夹中创建`global.d.ts`文件。

2. 在`global.d.ts`中定义全局变量，例如：

   declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
       $myVar: string;
     }
   }

上述代码中，我们使用`declare module`来声明一个模块。`@vue/runtime-core`是Vue3的核心运行时模块。然后我们在`ComponentCustomProperties`接口中添加了一个`$myVar`属性作为全局变量。

3. 在Vue组件中使用全局变量，例如：

   <template>
     <div>{{ $myVar }}</div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     mounted() {
       console.log(this.$myVar);
     }
   });
   </script>

在上述代码中，我们可以在Vue组件的模板中使用全局变量`$myVar`，也可以在Vue组件的`mounted`钩子中通过`this.$myVar`访问全局变量。

注意：在使用全局变量之前，需要先在代码中初始化全局变量。例如，在Vue应用程序的入口文件中，可以通过`app.config.globalProperties.$myVar = 'Hello World';`来初始化全局变量。