Как правильно оформить вычисляемые свойства с TS, чтобы линтер не ругался?

Question

[Даниил Попов]

Есть вычисляемое свойство с геттером и сеттером, которые не понимают что такое this. Сам код работает корректно

Ошибка


Код

import Vue from "vue"
  import { mapMutations } from "vuex";

  export default Vue.extend({
    name: "v-component",
    props: {
      text: {
        type: String
      }
    },
    computed: {
      computedProperty: {
        get(): string {
          return this.text;
        },
        set(value) {
          this.someMethod(value);
        }
      }
    },
    methods: {
      ...mapMutations({
        someMethod: "SOME_METHOD"
      })
    }
  })

Comments

[Алексей Ярков]

А если так:
Vue.set(this.item, 'text', value);

[Даниил Попов]

Алексей Ярков, changeProperty - это метод стора. Vue.set в данном случае нарушает логику приложения и не исправляет аналогичную ошибку с this.item, который является данными компонента

[Алексей Ярков]

Даниил Попов, тогда надо весь код смотреть

[Даниил Попов]

Алексей Ярков,

Скрин ошибки

<script lang="ts">
  import Vue from "vue"
  import { mapMutations } from "vuex";

  export default Vue.extend({
    name: "v-component",
    props: {
      text: {
        type: String
      }
    },
    computed: {
      computedProperty: {
        get(): string {
          return this.text;
        },
        set(value) {
          this.someMethod(value);
        }
      }
    },
    methods: {
      ...mapMutations({
        someMethod: "SOME_METHOD"
      })
    }
  })
</script>

[Kovalsky]

Явно определите тип this для каждого метода например

Кстати странно что у вас типы автоматически не определяются, в оф примерах вроде бы все как у вас, но типы определены автоматически - https://vuejs.org/v2/guide/computed.html

[Даниил Попов]

Явно определите тип this для каждого метода например

Kovalsky, подскажите, пожалуйста, как это сделать

Answer 1

[Алекс К]

Задайте явное определение "this" для геттера/сеттера. Это делается первым "this" параметром сигнатуры функции. Параметр в данном случае фэйковый, то есть используется только для определения типа "this". Например:

get(this: {text: string}): string {
   return this.text;
},
set(this: {someMethod: (value: string) => void}, value: string) {
   this.someMethod(value);
}