Vue3 TypeScript中computed访问this.searchData提示类型不存在如何解决？

1. 核心错误：defineComponent导入路径错误 #

你当前使用import { defineComponent } from "@vue/runtime-core";导入定义组件的方法，@vue/runtime-core是Vue的底层内部运行时依赖，没有携带完整的Options API类型推导逻辑，导致组件内部的data、methods等属性无法正确挂载到this的类型上，才会报searchData不存在的错误。
正确的导入路径应该是从vue根包导入：

import { defineComponent } from "vue";

2. 不需要修改全局类型声明 #

你添加到shims-vue.d.ts的全局类型声明代码是完全不必要的，甚至会污染全局组件实例类型，请删除这段代码。只要导入路径正确，defineComponent会自动根据你定义的data、methods、computed等配置自动推导this的类型，不需要手动全局声明。

3. 可选优化：显式标注计算属性返回值类型 #

为了避免隐式类型报错，你可以给filteredSearch计算属性显式标注返回值类型：

computed: {
  // 显式指定返回值为SearchDataType数组
  filteredSearch(): SearchDataType[] {
    return this.searchData.filter((filteredItem: SearchDataType) => {
      return filteredItem.name.match(this.searchQuery)
    })
  }
}

修正后完整代码 #

<script lang="ts">
import { defineComponent } from "vue";
import { testData } from "../assets/testData";


export type SearchDataType = {
  _id: string;
  index: number;
  name: string;
};

interface ISearchPage {
  searchData: SearchDataType[];
  searchQuery: string
}

export default defineComponent({
  name: "SearchPage",
  components: {},
  data(): ISearchPage {
    return {
      searchData: [],
      searchQuery: ''
    };
  },
  methods: {
    getData: function () {
      this.searchData = testData;
    },
  },
  created(){
    this.getData()
  },
  computed: {
    filteredSearch(): SearchDataType[] {
      return this.searchData.filter((filteredItem: SearchDataType) => {
        return filteredItem.name.match(this.searchQuery)
      })
    }
  }
});
</script>

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