vue3+ts使用app.config.globalProperties全局挂载实例方法，扩展模块解决ts类型检查报错

1. main.ts中代码

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { getAuthHeader } from './global'const app = createApp(App)// 挂载全局访问属方法获取
app.config.globalProperties.$getAuthheader = getAuthHeader()
app.use(router)
app.mount('#app')

2. index.ts代码

//index.ts
/**定义一些全局方法和属性 *//**获取登陆请求头 */
export const getAuthHeader = () => {return {Authorization: `Bearer ${localStorage.token || ''}`}
}

3. HelloWorld.vue中使用

<template>
<h1>{{headers}}</h1>
</template>
<script lang="ts">
import {defineComponent,getCurrentInstance,ref,
} from 'vue'// 定义了全局方法之后需要扩充类型
declare module '@vue/runtime-core' {interface ComponentCustomProperties {$getAuthheader: any}
}export default defineComponent({setup() {// const internalInstance = getCurrentInstance()// console.log(internalInstance)// 这种方法也可以获取到全局方法// console.log(internalInstance.appContext.config.globalProperties.$global)const { proxy } = getCurrentInstance()const headers = ref<string>(proxy.$getAuthheader)}return{headers}
})
</script>

这样$getAuthheader就不会抛红了