无法在 VUEjs Typescript 中引用 data()

Question

在导出中引用 data() 时出现错误。它说属性不存在。我究竟做错了什么？ VueJS 版本 2.

这是数据：

<script lang="ts">
  
export default {
  data() : {
  item: Array<Number> 
  key: Number
  keyy: Number
  } {
  return {
    item: [],
    key: 0,
    keyy: 0,
    };
  },

这里我想在相同的导出默认值中引用它：

methods: {
      async para(value: any){
        this.key=value.target.value   //Here i get error
    },
      async paraa(value: any){
        this.keyy = value.target.value    //Here i get error
    },
    async openChannels() {
      const randomArray = [0,2]
      this.item.push(randomArray[0])  //Here i get error
    }
}
}
    </script>

我得到的错误是：

属性 'key' 不存在于类型 '{ para(value: any): Promise; paraa（值：任何）：承诺； openChannels(): 承诺； }'

属性 'keyy' 不存在于类型 '{ para(value: any): Promise; paraa（值：任何）：承诺； openChannels(): 承诺； }'

属性 'item' 不存在于类型 '{ para(value: any): Promise; paraa（值：任何）：承诺； openChannels(): 承诺； }'

感谢您的帮助。

Ps：我的 vetur 扩展没有显示任何错误。我只在编译代码时得到这些。

Answer 1

如果你想要 TypeScript 支持你需要使用 defineComponent

import { defineComponent } from 'vue'
export default defineComponent({
...
})

我会推荐 Volar 而不是 Vetur。

我还建议定义更接近实际值的类型：

data() {
  return {
    item: [] as Array<Number>,
    key: 0 as Number,
    keyy: 0 as Number,
    };
  },

旧答案

randomArray 未定义，您可能缺少 const 或 let

const randomArray = [0,2] // <--

你少了一个}结尾

  }
} // <--
</script>

进行这些编辑后，您的代码应该可以工作：Live demo

无法在 VUEjs Typescript 中引用 data()

Unable to reference data() in VUEjs Typescript

javascript

typescript

vue.js

旧答案