Typescript 在新的 Vue 3 项目中不起作用

【问题标题】：Typsescript not working in fresh Vue3 projectTypescript 在新的 Vue 3 项目中不起作用
【发布时间】：2021-11-11 01:21:20
【问题描述】：

使用 Vue CLI（Vue3、Babel、Typescript）创建新应用后，无法访问从 createApp 函数返回的主应用对象上的“配置”对象。

通过在 VS Code 中向下钻取，我可以看到 Typescript 'App' 类型和关联的 config: AppConfig 类型。

但 VS Code 将访问“配置”突出显示为错误：

“ComponentPublicInstance>'.ts(2339)

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router).mount('#app') 

app.config <-- can't do this

【问题讨论】：

标签： typescript vue.js visual-studio-code

【解决方案1】：

是的，这是因为 mount 方法返回的是 ComponentPublicInstance 而不是 vue 实例本身。由于您已将其链接到 createApp 方法，因此 app 常量将不包含 vue 实例。自然，不允许访问配置属性。请参阅下面的函数签名：

mount(rootContainer: HostElement | string, isHydrate?: boolean, isSVG?: boolean): ComponentPublicInstance;

您需要重写以下代码才能访问vue 实例的配置属性。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App);
app.use(store);
app.use(router)
app.mount('#app');

// You'll be able to access the config now
app.config;

【讨论】：