Vue2+Typescript给自定义组件传任意prop时VS Code报TS2769错误如何解决

修复步骤 #

1. 补全组件的类型导入
   你在TheHeader.vue中使用了Prop类型但未导入，导致TS无法正确推导组件props定义，修改TheHeader.vue的script导入部分：

// TheHeader.vue <script lang="ts"> 部分
import Vue, { Prop } from 'vue' // 新增Prop导入
export default Vue.extend({
  name: 'TheHeader',
  props: {
    first_name: {
      type: String as Prop<string>,
      default: 'User'
    },
  },
})

2. 修正.vue类型声明文件配置
   你的tsconfig.json中将shims-vue.d.ts放在了测试目录下，该文件是用于全局声明.vue模块类型的核心文件，需调整配置：

• 将shims-vue.d.ts移动到src根目录，确保文件内容如下：

// src/shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

• 修改tsconfig.json的include配置，将该声明文件纳入编译范围：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/shims-vue.d.ts", // 替换原来的tests下的shims路径
    "tests/unit/*.ts",
    "tests/unit/*.tsx"
  ]
}

3. 修复编辑器插件识别问题
   如果使用Volar插件，需要开启Vue2兼容模式：

• 打开VS Code设置，搜索Volar: Vue Version，选择2.x版本
• 按快捷键Ctrl+Shift+P，执行「重启TypeScript ES语言服务」清除缓存
  如果使用Vetur插件，建议更换为Volar，Vetur对Vue2+TS的props类型推导存在较多已知兼容性问题。

4. 严格模式下的可选值兼容
   你开启了strict: true严格模式，如果user.first_name可能为null/undefined，可以调整prop类型定义兼容空值：

first_name: {
  type: String as Prop<string | null | undefined>,
  default: 'User'
}

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