Vue组件methods中this无法访问data属性的TypeScript问题求助

我之前在Vue项目里用TypeScript时也碰到过一模一样的问题，TS报错说answer1不存在，本质是因为TypeScript没能正确把this推断为Vue组件实例，反而当成了methods对象本身——这也就是为什么你能调用this.test()（因为test是methods里的方法），但访问data里的属性就报错。

下面给你两种针对性的解决方法，对应不同的Vue版本：

如果你用的是Vue 2 #

直接用Vue.extend()包裹你的组件选项，它会帮助TypeScript生成完整的组件实例类型，把data、methods等所有属性都合并到this的类型中：

import Vue from 'vue';
import Editor from './Editor.vue';
import Chart from './Chart.vue';

export default Vue.extend({
  name: 'app',
  components: {
    Editor, Chart,
  },
  methods: {
    receiveValues(value1: string, value2: string) {
      console.log(value1);
      this.answer1 = value1; // 现在TS不会报错了
      console.log('receiveValues ' + this.test());
    },
    test() {
      console.log('blablabla');
      return 'did it';
    },
  },
  data() {
    return {
      content: 'I\'m Test Content!',
      answer1: '',
      answer2: '',
      answer3: '',
      answer4: '',
    };
  },
});

如果你用的是Vue 3 #

Vue 3里推荐用defineComponent()来包裹组件选项，它的作用和Vue 2的Vue.extend()类似，专门为TypeScript做了类型推断优化：

import { defineComponent } from 'vue';
import Editor from './Editor.vue';
import Chart from './Chart.vue';

export default defineComponent({
  name: 'app',
  components: {
    Editor, Chart,
  },
  methods: {
    receiveValues(value1: string, value2: string) {
      console.log(value1);
      this.answer1 = value1;
      console.log('receiveValues ' + this.test());
    },
    test() {
      console.log('blablabla');
      return 'did it';
    },
  },
  data() {
    return {
      content: 'I\'m Test Content!',
      answer1: '',
      answer2: '',
      answer3: '',
      answer4: '',
    };
  },
});

额外检查项 #

最后再确认下你的tsconfig.json配置，确保这些关键选项是正确的：

• "target": "ES2015"（你已经设置了，没问题）
• "strict": true（开启严格模式能让TypeScript的类型检查更准确）
• "esModuleInterop": true（避免模块导入的类型问题）

这样修改后，TypeScript就能正确识别this指向的是整个Vue组件实例，自然就能访问到data里的answer1属性了。

内容的提问来源于stack exchange，提问作者Treegardener