Nuxt3项目Vue SFC中使用TypeScript类型/接口遇IntelliSense错误

问题描述 #

在Nuxt3组件中尝试通过TypeScript接口定义props强类型：

<script setup>
interface Props {
  float: number;
}

const props = defineProps<Props>();
</script>

VS Code的IntelliSense抛出错误：

'interface' declarations can only be used in TypeScript files. ts(8006)

使用类型注解（如let x: string）时，同样触发错误：

Type annotations can only be used in TypeScript files. ts(8010)

虽然可以使用运行时props声明正常工作：

<script setup>
const props = defineProps({
  float: { type: Number, required: true },
});
</script>

但希望通过TypeScript语法实现全局类型安全。

已尝试的无效操作 #

• 安装Volar扩展
• 禁用工作区内置TypeScript扩展并启用Takeover模式（状态栏显示(takeover)标识）
• 重启Volar Vue Server及VS Code

可能的原因及解决方法 #

1. Vue文件未启用TypeScript语法 #

在<script setup>标签上显式声明lang="ts"，确保Volar将文件识别为TypeScript兼容格式：

<script setup lang="ts">
interface Props {
  float: number;
}

const props = defineProps<Props>();
</script>

2. 项目TypeScript配置缺失或异常 #

• 检查项目根目录是否存在tsconfig.json和nuxt.config.ts（而非.js后缀），若缺失，执行npx nuxi init --ts重新初始化TypeScript配置
• 在nuxt.config.ts中确认TypeScript模块已启用：

export default defineNuxtConfig({
  typescript: {
    strict: true, // 可选，开启严格类型检查
    typeCheck: true // 可选，启用项目类型检查
  }
})

3. Volar扩展配置或版本问题 #

• 更新Volar扩展至最新版本，重启VS Code
• 打开VS Code设置，搜索Volar: Enable Takeover Mode，确认选项已勾选
• 删除项目根目录.vscode/settings.json中可能冲突的配置，重新启用Takeover模式

4. TypeScript版本不兼容 #

• 查看package.json中的typescript版本，确保与Nuxt3、Volar版本兼容（推荐使用Nuxt3官方指定的稳定版本，如~5.0.x）
• 执行npm install typescript@latest --save-dev更新TypeScript，重启开发服务

内容的提问来源于stack exchange，提问作者gyohza