vue-class-component中配置动态参数如何解决类型不匹配报错

问题原因 #

• @Component 装饰器仅接收Vue官方约定的组件选项字段，你自定义的storeTmp不属于合法选项，且要注入Vuex必须使用固定字段名store，不支持自定义命名。
• 新增非法字段后TypeScript无法将整个配置对象识别为合法的组件选项类型，才会抛出找不到components字段的异常，本质是整体配置类型校验失败。

修复方案 #

动态构造配置对象，仅在生产环境下插入合法的store字段即可，不要传自定义字段或null值：

import vuetify from '@/plugins/vuetify'
import store from '../store/Index'

// 先声明基础合法配置
const componentOptions = {
  components: {
    vue2Dropzone
  },
  vuetify
}

// 生产环境才追加store配置
if (process.env.NODE_ENV === 'production') {
  componentOptions.store = store
}

@Component(componentOptions)

如果仍有TypeScript类型报错，给配置对象加上Vue组件选项类型断言即可：

import type { ComponentOptions, Vue } from 'vue'

const componentOptions = {
  // 基础配置同上
} as ComponentOptions<Vue>

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