javascript - vue js global variable got error but working

Question

I'm beginner for vuejs and typescript. I made a new window property for using a variable globally and got this error.

 Property 'getAlert' does not exist on type 'Window & typeof globalThis'.
    15 |     methods:{
    16 |       getAlert(text : string){
  > 17 |         window.getAlert(text)
       |                ^
    18 |       }

But when I run the page, it's working well. I don't understand this weird happening. How to solve this problem? I wanna delete this error. here is my code.

vue file

<template>
  <div class="home">
    <v-btn  @click="[getAlert('11111')]"></v-btn>
        <h1>This is an Home page</h1>
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
    name: 'Home',
    methods:{
      getAlert(text : string){
        //window.getAlert(text)
        Vue.prototype.$getAlert(text)

      }
    }
})
</script>

main.ts

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

var vm = new Vue({ 
  router,
  store,
  vuetify,
  methods:{
    getAlert(text :string){
         alert(text)
       }
  },
  render: h => h(App)
}).$mount('#app')
Vue.prototype.$getAlert = vm.getAlert

.d.ts file

declare global{ 
  interface Window{
    getAlert : any;
  }
}

question from:https://stackoverflow.com/questions/65623056/vue-js-global-variable-got-error-but-working

Answer 1

Waitting for answers