此类型不存在属性答案

【问题标题】：Property does not exist in this type此类型不存在属性
【发布时间】：2023-02-16 20:54:12
【问题描述】：

我是 TypeScript 的新手，现在我正面临一些“类型”问题。我试图找到类似的问题，但他们无法帮助我。

我的 webpack 返回了 3 个错误：

TS2339: Property 'current_category' does not exist on type '{ filterByCategory: (array: any) => any; }'。
TS2339: Property 'filterByCategory' does not exist on type '{ filteredProducts: () =>任何； }'。

TS2339:Property 'services' does not exist on type '{ filteredProducts: () => any; }'。

我的代码：

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

declare var wpFrontendLocalizer: any;

export default {
  name: 'HomePage',
  components: {},
  
  methods: {
    filterByCategory: function(array: any){
      return array.filter((service: any) => service.type == this.current_category) ;
    }
  },
  data() {
    return {
      current_category:"xxx",
      services:[
        
      ]
    }
  },
  computed:{
    filteredProducts: function(){
      return this.filterByCategory(this.services);
    }
  },
  mounted() {
    
  },
}
</script>

【问题讨论】：

标签： typescript vue.js

【解决方案1】：

问题是 TypeScript 不知道 filterByCategory 方法中 this 的类型，所以它不知道 this.current_category 和 this.services 存在。要解决此问题，您可以向定义组件方法、数据和计算属性的对象添加类型注释。这是包含类型注释的代码的更新版本：

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

declare var wpFrontendLocalizer: any;

export default {
  name: 'HomePage',
  components: {},
  
  methods: {
    filterByCategory: function(this: { current_category: string }, array: any){
      return array.filter((service: any) => service.type == this.current_category) ;
    }
  },
  data(): { current_category: string, services: any[] } {
    return {
      current_category: "xxx",
      services: [],
    };
  },
  computed:{
    filteredProducts: function(this: { filterByCategory: (array: any) => any, services: any[] }){
      return this.filterByCategory(this.services);
    }
  },
  mounted() {
    
  },
}
</script>

【讨论】：

【解决方案2】：

您需要像这样首先定义这些类型。

interface MyComponent {
  current_category: string;
  filterByCategory(array: any): any;
  services: any[];
  filteredProducts(): any;
}

export default {
  name: 'HomePage',
  components: {},
  methods: {
    filterByCategory(array: any) {
      return array.filter((service: any) => service.type == this.current_category);
    }
  },
  data(): MyComponent {
    return {
      current_category: "xxx",
      services: [],
      filteredProducts() {
        return this.filterByCategory(this.services);
      }
    };
  },
  mounted() {},
};

【讨论】：