Vue2+TypeScript+VS Code自定义组件导入TS报错求助

1. 修正 vue-shims.d.ts 声明文件 #

项目根目录的 vue-shims.d.ts 必须正确配置，才能让 TS 识别 .vue 组件并完成类型推断，补全以下内容：

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

// 给 Vue 实例补充 props 类型支持，解决 Options API 下的类型推断问题
declare module 'vue/types/vue' {
  interface Vue {
    $props: Record<string, any>
  }
}

2. 对齐 VS Code 与项目的 TS 版本 #

VS Code 默认使用内置 TS 版本，和项目本地依赖版本不匹配会引发类型校验异常：

• 按 Ctrl+Shift+P 打开命令面板
• 输入 TypeScript: Select TypeScript Version
• 选择 Use Workspace Version（即项目 node_modules 里安装的 TS 版本）

3. 给组件 Props 显式声明类型 #

在自定义组件里用 PropType 明确指定 props 类型，不要依赖 TS 隐式推断：

<script lang="ts">
import Vue from 'vue'
import { PropType } from 'vue'

export default Vue.extend({
  props: {
    class: {
      type: String as PropType<string>,
      required: false,
      default: ''
    }
  }
})
</script>

4. 替换 Vetur 为 Volar（Vue 2 适配版） #

Vetur 对 Vue 2 + TS 的支持有局限，Volar 的 Vue 2 兼容模式更靠谱：

• 卸载 Vetur 插件
• 安装 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar)
• 在项目根目录新建 volar.config.js：

module.exports = {
  vueCompilerOptions: {
    target: 2 // 指定适配 Vue 2
  }
}

5. 清理缓存并重启 TS 服务 #

• 删除项目里的 .tsbuildinfo 文件（如果存在）
• 关闭 VS Code 后，删除工作区缓存：Windows 路径是 %APPDATA%\Code\User\workspaceStorage，Linux/macOS 是 ~/.config/Code/User/workspaceStorage
• 重新打开项目，按 Ctrl+Shift+P 输入 TypeScript: Restart TS Server 重启服务

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