Vue3 + TS4.8其他踩坑记录

在Vue3和TypeScript 4.8的环境中，遇到的一些常见问题及其解决方案如下：

1. 类型声明与模块导出不匹配

   错误示例：

   
   
   
   // MyComponent.vue
   <script lang="ts">
   export default {
     // ...
   }
   </script>

   解决方案：

   确保<script>标签中使用了lang="ts"属性，并且正确导出组件。

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { defineComponent } from 'vue';
    
   export default defineComponent({
     // ...
   });
   </script>

2. 类型不匹配：无法将类型“{}”分配给类型“VueConstructor”

   错误示例：

   
   
   
   // MyComponent.vue
   <script lang="ts">
   export default {
     data() {
       return {
         message: 'Hello Vue 3!'
       };
     }
   };
   </script>

   解决方案：

   使用defineComponent来定义组件，并确保正确使用data函数。

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { defineComponent } from 'vue';
    
   export default defineComponent({
     data() {
       return {
         message: 'Hello Vue 3!'
       };
     }
   });
   </script>

3. 类型不匹配：不能将类型“CombinedVueInstance<{}, {}, {}, {}, {}, {}, {}, {}, {}, false, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}>”分配给类型“VueConstructor”

   错误示例：

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { Vue } from 'vue-property-decorator';
    
   export default class MyComponent extends Vue {
     // ...
   }
   </script>

   解决方案：

   使用Vue.extend来创建扩展类。

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { Vue, Component } from 'vue-property-decorator';
    
   @Component
   export default class MyComponent extends Vue.extend({
     // ...
   }) {}
   </script>

4. 类型不匹配：不能将类型“VueConstructor<Vue>”分配给类型“VueConstructor<{}>”

   错误示例：

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { Vue } from 'vue-class-component';
    
   @Component
   export default class MyComponent extends Vue {
     // ...
   }
   </script>

   解决方案：

   确保@Component装饰器正确使用，并且所有必要的选项都被正确传递。

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import { Vue, Component } from 'vue-property-decorator';
    
   @Component
   export default class MyComponent extends Vue {
     // ...
   }
   </script>

5. 类型不匹配：不能将类型“VueConstructor<{}>”分配给类型“VueConstructor<Vue>”

   错误示例：

   
   
   
   // MyComponent.vue
   <script lang="ts">
   import Vue from 'vue';
    
   export default Vue