For my Nuxt 3 project, I am developing a component and attempting to declare an interface for the component props to ensure strong typings. Here is an example:
<script setup>
interface Props {
float: number;
}
const props = defineProps<Props>();
</script>
However, I encountered an error in VS Code's intellisense when trying to do so:
'interface' declarations can only be used in TypeScript files. ts(8006)
Additionally, there was another error when using type annotations like let x: string:
Type annotations can only be used in TypeScript files. ts(8010)
While I could resort to using runtime declaration syntax for the props - such as:
const props = defineProps({
float: { type: Number, required: true },
});
I prefer to utilize TypeScript syntax for better type safety and consistency across the project.
Attempts Made
Following the standard procedures to enable TS syntax for Vue files in VS Code:
- I have installed Volar;
- To enable Takeover mode, I have disabled the built-in TypeScript VS Code extension for the workspace which displays (takeover) in the status bar.
Despite these steps, the errors persist even after restarting the Volar Vue Server and VS Code itself. What could be causing these errors to show up?