带有打字稿的Vue2，类型上不存在属性

Posted 2023-02-22

【中文标题】带有打字稿的Vue2，类型上不存在属性

【英文标题】：Vue2 with typescript, Property does not exist on type

【发布时间】：2018-11-21 10:41:32

【问题描述】：

我有以下 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 |     );

有谁知道我该如何解决这个问题，或者解释一下为什么会这样？

【问题讨论】：

你能将close(): void 声明为箭头函数吗？

然后我得到更多的错误。我可以通过 (this as any).snackbar 解决它，但它应该可以工作。我看过很多例子，这就是它的完成方式。我也在使用文档中所述的垫片

也许对***.com/questions/56002310/…有帮助。

【参考方案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)。现在 typescript 期望 this 是 V 类型（我假设它是一个 vue 实例），并且由于该 vue 实例在它的定义中没有小吃栏，所以繁荣，打字稿抛出。

这里有很多猜测，但我认为几乎所有除了明确返回object的东西都可以与DefaultData<V>中的第二个签名不匹配。

【讨论】：

这解决了，我想我真的应该为我的数据创建一个接口吗？总之，问题解决了，谢谢