Vue2 с машинописным шрифтом, свойство не существует для типа

Question

У меня есть следующий компонент Vue:

<template>
    <v-snackbar bottom :color="color" v-model="snackbar">
        {{ msg }}
        <v-btn flat @click.native="close()">Close</v-btn>
    </v-snackbar>
</template>

<script lang="ts">
    import Vue from 'vue';
    import VueEvent from '../../VueEvent';

    export default Vue.extend({
        data(): object {
            return {
                snackbar: false,
                msg: '',
                color: '',
            };
        },
        created() {
            VueEvent.listen('snackbar', (data) => {
                this.snackbar = true;
                this.msg = data.msg;
                this.color = data.color;
            });
            this.malert();
        },
        methods: {
            close(): void {
                this.snackbar = false;
            }
        }
    });
</script>

<style scoped>

</style>

Когда компилируется Typescript, я получаю следующую ошибку:

Property 'snackbar' does not exist on type 'CombinedVueInstance<Vue, object, { close(): void; }, {}, Readonly<Record<never, any>>>'.
    28 |         methods: {
    29 |             close(): void {
  > 30 |                 this.snackbar = false;
       |                      ^
    31 |             }
    32 |         }
    33 |     });

Кто-нибудь знает, как я могу решить эту проблему, или объясните, почемуэто происходит?

Answer 1

Ну, у меня нет хорошего ответа для вас, но у меня есть теория:

Исходное объявление типа находится в vue / types / options.d.ts:

type DefaultData<V> =  object | ((this: V) => object); // here is the kicker
Data=DefaultData<V>
data?: Data;

И я обнаружил, что:

data():object { ... // this.snackbar does not exist
data(){ ... // this.snackbar does exist.
data(): any { ... // this.snackbar does exist.
data(): { snackbar: boolean; msg: string; color: string } { ... // Also valid

Я думаю, что без вашего объявления объекта машинопись будет думать, что data - это DefaultData<V> = object.Но как только вы скажете, что он возвращает объект, данные неожиданно совпадут с ((this: V) => object).Теперь машинопись ожидает, что this будет иметь тип V (который, как я полагаю, является экземпляром vue), и поскольку этот экземпляр vue не имеет в своем определении снэк-бара, бум, броски машинописи.

Лотдогадываюсь здесь, но я думаю, что почти все, что , за исключением , явно возвращающего object, будет работать, чтобы не соответствовать этой второй сигнатуре в DefaultData<V>.