Vue项目中TS报TS2339属性不存在错误，代码可运行如何解决？

报错信息 #

错误1 #

ERROR in src/components/Dashboard.vue:20:32
TS2339: Property 'fetchAllProducts' does not exist on type '{ data: () => { products: Product[]; }; mounted(): Promise; methods: { fetchAllProducts(): Promise; }; }'.

对应代码行：

18 |     }),
    19 |     async mounted() {
  > 20 |         const res = await this.fetchAllProducts();
       |                                ^^^^^^^^^^^^^^^^
    21 |         this.products = res;
    22 |         console.log(res)
    23 |     },

错误2 #

ERROR in src/components/Dashboard.vue:21:14
TS2339: Property 'products' does not exist on type '{ data: () => { products: Product[]; }; mounted(): Promise; methods: { fetchAllProducts(): Promise; }; }'.

对应代码行：

19 |     async mounted() {
    20 |         const res = await this.fetchAllProducts();
  > 21 |         this.products = res;
       |              ^^^^^^^^
    22 |         console.log(res)
    23 |     },
    24 |     methods: {

问题代码 #

<script lang="ts">
import { Product } from '@/types/types';
import axios from 'axios'

export default {
    data: () => ({
        products: [] as Product[]
    }),
    async mounted() {
        const res = await this.fetchAllProducts();
        this.products = res;
        console.log(res)
    },
    methods: {
        async fetchAllProducts(){
            try {
                const res = await axios.get('https://fakestoreapi.com/products')
                return res.data;
            } catch (e) {
                console.log(e)
            }
        }
    }
}
</script>

解决方案 #

报错原因是TypeScript无法自动推断Vue选项式API中this的准确类型，以下是几种可行的修复方式：

方式1：用Vue.extend包裹组件选项 #

通过Vue.extend()明确组件类型，让TS能正确推导this的属性和方法：

<script lang="ts">
import Vue from 'vue';
import { Product } from '@/types/types';
import axios from 'axios'

export default Vue.extend({
    data: () => ({
        products: [] as Product[]
    }),
    async mounted() {
        const res = await this.fetchAllProducts();
        this.products = res;
        console.log(res)
    },
    methods: {
        async fetchAllProducts(){
            try {
                const res = await axios.get('https://fakestoreapi.com/products')
                return res.data;
            } catch (e) {
                console.log(e)
            }
        }
    }
})
</script>

方式2：手动定义组件类型并断言this #

为组件实例定义类型，在mounted方法中给this添加类型断言：

<script lang="ts">
import { Product } from '@/types/types';
import axios from 'axios'

// 定义组件实例的类型
type DashboardInstance = {
    products: Product[];
    fetchAllProducts(): Promise<Product[]>;
}

export default {
    data: () => ({
        products: [] as Product[]
    }),
    // 断言this的类型
    async mounted(this: DashboardInstance) {
        const res = await this.fetchAllProducts();
        this.products = res;
        console.log(res)
    },
    methods: {
        async fetchAllProducts(){
            try {
                // 给axios请求添加泛型，明确返回数据类型
                const res = await axios.get<Product[]>('https://fakestoreapi.com/products')
                return res.data;
            } catch (e) {
                console.log(e)
                // 错误分支返回空数组，保证返回类型一致
                return [];
            }
        }
    }
}
</script>

方式3：切换到Composition API（推荐） #

如果使用Vue 2.7+或Vue 3，Composition API对TypeScript的类型推断支持更友好，代码逻辑也更清晰：

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Product } from '@/types/types';
import axios from 'axios'

// 用ref声明响应式变量，自动推导类型
const products = ref<Product[]>([]);

const fetchAllProducts = async () => {
    try {
        const res = await axios.get<Product[]>('https://fakestoreapi.com/products')
        return res.data;
    } catch (e) {
        console.log(e)
        return [];
    }
}

onMounted(async () => {
    const res = await fetchAllProducts();
    products.value = res;
    console.log(res);
});
</script>

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