如何设置主Vue 3 'app‘变量的“type”

Question

我正在尝试实现一个小型的打字稿Vue3应用，作为一个培训练习。我正在取得很好的进步，但遇到了一个障碍。我会感谢那些比我更有见识的人的一些建议。

我一直在使用消防基地建立授权，并正在实施路线警卫。这些工作，但用户直接在地址栏中键入新路由的情况除外。在这种情况下，它似乎重新创建了teh应用程序之前，它有有关的信息，在用户。因此，它认为用户为空，并呈现登录页。因此，我建议实施以下措施。

main.ts

import App from './App.vue'
import { createApp, App as Application } from 'vue'
import router from './router'

import { projectAuth } from './firebase/config'
import { onAuthStateChanged } from 'firebase/auth'

let app: Application

onAuthStateChanged(projectAuth, () => {
  if (!app) {
    app = createApp(App)     // type error on 'app'
      .use(router)
      .mount('#app')
  }
})

它作为一个纯Javascript实现工作，但在类型记录中抛出一个类型错误。

如何在上述代码中定义应用程序的类型？

我尝试过几种不同的方法，都是无效的，包括：

let app: typeof App 
let app: App<Element>
let app: typeof Application 

我想这是很简单的事情，但作为一名打字的新手，我却避之不及。

Answer 1

从App导入vue类型，将其重命名为Application，以避免使用App组件折叠，然后用Application类型注释app

import { createApp, App as Application } from 'vue'
let app: Application;

onAuthStateChanged(projectAuth, () => {
  if (!app) {
    app = createApp(App).use(router)
    app.mount('#app')       // do not chain mount after createApp
  }
}