Vue2+TypeScript中如何为this设置类型以实现完整类型检查？

方法一：使用Vue.extend包裹组件选项（选项式写法兼容） #

直接用Vue.extend()包裹你的组件配置对象，TypeScript会自动推断出组件实例的类型，包括data、methods等成员：

const MyComponent = Vue.extend({
  data() {
    return {
      a: "test"
    }
  },
  methods: {
    func1() {
      alert(this.a); // this类型为Vue实例+自定义属性/方法，支持类型提示
      this.func2();   // 同样能识别func2的类型
    },
    func2() {
    }
  }
});

new MyComponent({ el: '#app' });

方法二：使用类组件写法（推荐） #

通过vue-class-component和vue-property-decorator库，用类的方式定义组件，TypeScript会自动处理this的类型推断：

1. 安装依赖

npm install vue-class-component vue-property-decorator --save-dev

2. 改写组件为类式写法

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  // 直接定义响应式属性
  a = "test";

  func1() {
    alert(this.a); // this类型正确，支持属性和方法的类型检查
    this.func2();
  }

  func2() {}
}

方法三：配置tsconfig.json增强类型检查 #

确保你的tsconfig.json开启严格模式，并包含Vue的类型定义，让TypeScript的类型检查更彻底：

{
  "compilerOptions": {
    "strict": true, // 开启严格类型检查，关键配置
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "types": ["vue"], // 引入Vue的类型定义
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

方法四：手动标注this类型（临时应急） #

如果不想改动写法，可以在方法的参数位置手动指定this的类型：

new Vue({
  data: {
    a: "test"
  },
  methods: {
    func1(this: Vue & { a: string; func2: () => void }) {
      alert(this.a);
      this.func2();
    },
    func2() {
    }
  }
});

这种方式需要手动维护类型，适合临时场景，不推荐长期使用。

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