Свойство 'XXX' не существует для типа 'CombinedVueInstance <Vue, {}, {}, {}, только для чтения <запись <никогда, любая >>>'

Question

Я создал компонент VUE с TypeScript, и я получаю эту ошибку в data() и в methods():

Property 'xxx' does not exist on type 'CombinedVueInstance<Vue, {},
{}, {}, Readonly<Record<never, any>>>'.

Например:

33:18 Property 'open' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.
    31 |         methods: {
    32 |             toggle: function () {
  > 33 |                 this.open = !this.open
       |                  ^
    34 |                 if (this.open) {
    35 |                     // Add click listener to whole page to close dropdown
    36 |                     document.addEventListener('click', this.close)

Эта ошибка также показывает любое время использования this.close().

Это компонент:

<script lang='ts'>
    import Vue from 'vue';
    import axios from 'axios'
    export default Vue.extend({
        data: function () {
            return {
                open: false
            }
        },
        computed: {
            profilePath: function () {
                return "/user/" + this.$store.state.profile.profile.user.id
            }
        },
        methods: {
            toggle: function () {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close: function () {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }
    })
</script>

Что вызывает эту ошибку? Кажется, он все еще строит разработку с ошибками, но они вызывают проблемы при развертывании в производство.

Answer 1

Вам нужно правильно использовать function, чтобы сохранить ссылку на это.

methods: {
            toggle() {
                this.open = !this.open
                if (this.open) {
                    // Add click listener to whole page to close dropdown
                    document.addEventListener('click', this.close)
                }
            },
            close() {
                this.open = false;
                document.removeEventListener('click', this.close)
            }
        }

Answer 2

Это, по-видимому, необъяснимо вызвано использованием this.$store для вычисления возвращаемого значения profilePath в сочетании с неопределенным типом возврата в его объявлении.

Один из способов - указать тип возвращаемого значения string:

profilePath: function(): string {

проверено с помощью npm run serve и npm run build, с использованием Vue CLI 3.7.0 на macOS Mojave

GitHub demo