如何使用 Typescript 从 Vue 中的方法中引用组件的数据？答案

【问题标题】：How to reference a component's data from its method in Vue with Typescript?如何使用 Typescript 从 Vue 中的方法中引用组件的数据？
【发布时间】：2020-01-22 23:29:08
【问题描述】：

我使用 typescript 启动了一个 vue.js 项目，我想使用单个文件组件，而不是类样式的组件。尝试使用“this”关键字引用组件数据时，我经常收到错误 TS2339：

export default { 
  data(){ 
    return { x: 10 as number };
  },
  methods: {
    foo() {
      if(this.x > 10) {
        return this.x;
      }
    }
  }
}

它总是导致“TS2339 Property 'x' does not exist on type 'CombinedVueInstance

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

它不工作的原因在official documentation 中有简要说明。

您需要在 SFC 中使用以下语法

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({

})
</script>

【讨论】：