Vue 组件中 data 和computed找不到props，然而methods可以，怎么办？(用的Typescript)

Question

环境

"dependencies": {
    "cross-spawn": "^5.1.0",
    "vue": "2.5.8"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "ts-loader": "^3.1.1",
    "typescript": "^2.6.1",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

直接上代码

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
  props: {
      inita:Number
  },
  data:function(){
      return {
          a:function(){
              return this.inita
          }
      }
      },
  computed:{
      b:function(){
          return this.inita;
      }
  },
  methods:{
      c:function(){
          return this.inita;
      }
  }
})
</script>

问题

报错：Property 'inita' does not exist on type '{ a: () => any; }'
报错：Property 'inita' does not exist on type '{ b: () => any; }'
然而methods就没问题

Answer 1

楼上的答案都不正确，这是ts类型检查的问题，报错很明显的告诉你，a函数和b函数的返回值默认是any，所以你要指定a函数和b函数的返回值的类型就好了，在data函数里面不需要再用函数来返回一个值，直接this.inita获取就好了

a: this.inita

b: function(): Number{
    return this.inita
}

Answer 2

试试箭头函数，感觉像是this指向的问题

Answer 3

Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

你的c不应该是个函数，既然你可以在methods里改变也可以computed，为甚把c定义为一个函数呢？

Answer 4

八成是vue本身的 bug 吧，它才刚开始支持typescript，会出些莫名的问题不奇怪。

我个人是推荐直接上vue-class-component的，我自己也是这么写的，用标准的类写法来写组件，就没有这些问题了。