Как подружить динамические свойства в data во Vue и TypeScript?

Question

[Алексей Николаев]

Доброй ночи.
Столкнулся с проблемой при соединении Vue и TS. Есть простой компонент:

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'.
  }
}

Однако он не работает потому, что свойства `config` нет в декларации ProductList. Я читал stackoverflow и гуглил, однако там дают откровенно глупые советы (например, const VueApp: any = Vue) либо предлагают сделать `declare module "*.vue"`, что уже сделано - я создал проект через vue-cli, и у меня в корневой директории находится `shims-vue.d.ts` с данной конструкцией. Опять же, погуглил, на stackoverflow написано, что этот файл не нужен для проекта и сборки, только для IDE - окей, но возможно, там ошибались?

В общем, что сделать, чтобы заработало?

Answer 1

[Алексей Николаев]

Решение - не использовать декоратор data, вместо этого использовать class properties.