How to make friends dynamic properties in data in Vue and TypeScript?

Question

typescript

Goodnight.
Faced a problem when connecting Vue and TS. There is a simple component:

import { Component, Vue } from 'vue-property-decorator';
import DataTable from '@/components/data-table/DataTable.vue';

@Component({
  name: 'product-list',
  components: {
    DataTable
  }
})
export default class ProductList extends Vue {
  data() {
    return {
      config: {} 
    }
  },
  created() {
    this.config = {} // Error: Property 'config' does not exist on type 'ProductList'.
  }
}

However, it doesn't work because the `config` property is not in the ProductList declaration. I read stackoverflow and googled, but they give frankly stupid advice (for example, const VueApp: any = Vue) or suggest doing `declare module "*.vue"`, which is already done - I created a project through vue-cli, and I have the root directory contains `shims-vue.d.ts` with this construct. Again, I googled it, it says on stackoverflow that this file is not needed for the project and assembly, only for the IDE - ok, but maybe they made a mistake there?
In general, what to do to make it work?

Answer 1

The solution is not to use the data decorator, instead use class properties.