TypeScript在Vue组件中出现TS2339属性不存在错误求助

这些TS2339错误是因为Vue 2选项式API在TypeScript中默认无法正确推断this的类型，导致methods、computed中的this被限定在了当前选项的局部类型里，而非完整的组件实例类型。

解决步骤： #

1. 使用defineComponent包裹组件选项（Vue 2.7+ 内置，若版本低于2.7需安装@vue/composition-api并导入），让TypeScript能正确推导组件实例的完整类型。
2. 替换any类型，定义明确的类型声明，提升代码类型安全性。

修改后的完整代码： #

<script lang="ts">
import axios from "axios";
import { defineComponent } from 'vue';
import type { WP_REST_API_Post } from 'wp-types';

// 定义Service类型，基于WP_REST_API_Post扩展或自定义
type Service = WP_REST_API_Post & {
  type: string;
};

declare var wpFrontendLocalizer: any;

export default defineComponent({
  name: 'HomePage',
  components: {},
  
  methods: {
    filterByCategory(array: Service[]): Service[] {
      return array.filter(service => service.type === this.current_category);
    }
  },
  data() {
    return {
      current_category: "xxx",
      services: [] as Service[]
    }
  },
  computed: {
    filteredProducts(): Service[] {
      return this.filterByCategory(this.services);
    }
  },
  mounted() {
    // 可在这里添加axios请求获取services数据
  },
});
</script>

关键说明： #

• defineComponent会为组件选项提供类型推断能力，让this指向完整的组件实例，解决找不到属性的问题。
• 定义Service类型替代any，明确了数组元素的结构，避免类型模糊。
• services: [] as Service[]通过类型断言初始化数组，确保后续操作符合类型要求。

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