Currently, I am in the process of setting up my vue-cli project that utilizes the composition API with <script setup> to fully integrate TypeScript. Each time I try to use variables within template tags, VSCode flags errors. I have already installed the Vue Language Features (Volar) v0.39.4 plugin.
I have attempted the following solutions without success:
- Inclusion of vue-file-import.d.ts
- Adjustments in tsconfig.json
- Reloading VSCode
Here's an example of the problem:
// ../src/views/component-a/Main.vue
<template>
<div>
{{string}} // This triggers a 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
}