javascript - using window property in vue js, show error but working well

Question

I'm a beginner of vue js. I'm making a Web App, So I try calling native method from webview and js method from native. I succeeded communicating with each other. But there are some red lines but working well. I don't want to see this error. When I run, it's occurred having no effect.

the window.getAlert is a method called from native to web method and the window.android1 is a interface variable called from web to native method.

Is there any way to solve this? here is my code.

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')
window.getAlert = vm.getAlert

common.d.ts

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

Home.vue

<template>
  <div class="home">
    <v-btn @click="[callWebMethod('callWebMethod')]">button1</v-btn>
    <h1>This is an Home page</h1>
    <v-btn @click="[callAndroidMethod2('callAndroidMethod')]">button2</v-btn>

    <!-- <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:{
      callWebMethod(text : string){
        window.getAlert(text)
      },

      callAndroidMethod(toast:String){
        window.android1.showToast(toast);
      },
      callAndroidMethod2(toast:String){
        window.android2.showToast2(toast);
      }

    }
})
</script>

error message

ERROR in C:/Users/ckdrb/Desktop/vue-pwa/src/main.ts(21,8):
21:8 Property 'getAlert' does not exist on type 'Window & typeof globalThis'. 
    19 |   render: h => h(App)
    20 | }).$mount('#app')
  > 21 | window.getAlert = vm.getAlert
       |        ^
ERROR in C:/Users/ckdrb/Desktop/vue-pwa/src/views/Home.vue(19,16):
19:16 Property 'getAlert' does not exist on type 'Window & typeof globalThis'.
    17 |     methods:{
    18 |       callWebMethod(text : string){
  > 19 |         window.getAlert(text)
       |                ^
    20 |       },
    21 | 
    22 |       callAndroidMethod(toast:String){
ERROR in C:/Users/ckdrb/Desktop/vue-pwa/src/views/Home.vue(23,16):
23:16 Property 'android1' does not exist on type 'Window & typeof globalThis'.
    21 | 
    22 |       callAndroidMethod(toast:String){
  > 23 |         window.android1.showToast(toast);
       |                ^
    24 |       },
    25 |       callAndroidMethod2(toast:String){
    26 |         window.android2.showToast2(toast);
ERROR in C:/Users/ckdrb/Desktop/vue-pwa/src/views/Home.vue(26,16):
26:16 Property 'android2' does not exist on type 'Window & typeof globalThis'.
    24 |       },
    25 |       callAndroidMethod2(toast:String){
  > 26 |         window.android2.showToast2(toast);
       |                ^
    27 |       }
    28 | 
    29 |     }

Answer 1

等待大神答复