Vue 3 模板中的类型"{}"上不存在 VsCode 插件错误"属性"X"

Question

我正在配置我的vue-cli项目(带有<script setup>的组合api(以完全支持TypeScript。每次在模板标记中使用变量时，VSCode都会给我错误。我正在使用Vue语言功能(Volar(v0.39.4插件。

我尝试失败：

• 添加vue-file-import.d.ts
• tsconfig.json编辑
• 重新加载VSCode

示例：

//  ../src/views/component-a/Main.vue
<template>
<div>
{{string}} // gives VsCode error: Property 'string' does not exist on type '{}'.ts(2339)
</div>
</template>

<script setup lang="ts">
const string: string = 'wohoo';
</script>

//tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.vue",
// "src/**/*.tsx",
// "tests/**/*.ts",
// "tests/**/*.tsx"
"x/**/*.ts",
"x/**/*.tsx"
],
"exclude": [
"node_modules",
// "src",
"tests"
]
}

//shims-vue.d.ts
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

Answer 1

找到解决方案：将Volar插件降级到旧版本v0.34.11(从v0.39.4(