使用TypeScript定义Vue组件时丢失Props智能提示的问题

以下是针对该问题的可行解决方法：

• 精确定义组件 Props 的类型
  在使用Vue.extend定义组件时，给props配置添加as const断言，让TypeScript推导出精确的字面量类型，编辑器才能识别props结构并提供智能提示：

  <script lang="ts">
  import Vue from 'vue'
  
  interface MyGreetingProps {
    name: string
    age?: number
  }
  
  export default Vue.extend({
    props: {
      name: {
        type: String,
        required: true
      },
      age: {
        type: Number,
        default: 18
      }
    } as const,
    // 组件逻辑代码
  })
  </script>
  

• 调整VS Code Vetur插件配置
  确保Vetur插件为最新版本，然后在VS Code设置中开启以下选项：

  • vetur.experimental.templateInterpolationService: 设置为true
  • vetur.useWorkspaceDependencies: 设置为true
    这两项配置能提升TypeScript组件在模板中的智能提示能力。

• 优化Nuxt的TypeScript配置
  在nuxt.config.js中开启严格类型检查和类型校验，帮助TypeScript更精准地推导组件类型：

  export default {
    typescript: {
      strict: true,
      typeCheck: true
    }
  }
  

• 改用Vue Class Component定义组件（可选）
  如果Vue.extend的方式仍无法解决问题，可以尝试使用Vue Class Component，它的类型推导对编辑器更友好：

  <script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  
  @Component({
    props: {
      name: {
        type: String,
        required: true
      },
      age: {
        type: Number,
        default: 18
      }
    }
  })
  export default class MyGreeting extends Vue {
    // 组件逻辑代码
  }
  </script>
  

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