Selesaikan masalah sifat tidak wujud pada jenis dalam Vue3 Typescript

Question

Saya cuba mengisi komponen dengan petunjuk daripada API. Saya mempunyai fail LeadService bersama-sama dengan fail templat vue saya. Masalah yang saya hadapi ialah saya menggunakan panggilan async pada fail templat, yang berfungsi, tetapi apabila saya pergi untuk mengira nilai, ia menimbulkan ralat property does not exit on type. Ia sebenarnya berfungsi dan anda boleh melihat komponen yang betul di sebalik mesej ralat. Saya tidak tahu bagaimana untuk membuat kesilapan itu hilang.

Ini adalah kategori perkhidmatanLeadService.ts

import ApiService from "@/core/services/ApiService";

interface Lead {
  id: string;
  first_name: string;
  last_name: string;
  lead_form_name: string;
  email: string;
  campaign: string;
  timestamp: number;
  mobile_number: string;
  message: string;
  medium: string;
  city: string;
  state: string;
  leadType: string;
  quality: string;
  source: string;
  call_link: string;
  company: string;
  country: string;
}

export default class LeadService {

  getLeads() {

    const accountInfo = JSON.parse(localStorage.getItem('accountInfo') || '{}');

    ApiService.setHeader();

    return ApiService.query("/leads", {params: {client_id : accountInfo.client_id}})
      .then(({ data }) => {
        let leadData: Lead[] = data['Items'];
        return leadData;
      })
      .catch(({ response }) => {
        return response;
      });

  }
}

Ini templat vue saya Leads.vue

<template>
  <!--begin::Leads-->
  <div class="row gy-5 g-xl-8 mb-8">
    <div class="col-xxl-12">
      <LeadTracker
        :lead-data="leadData"
        :updateQuality="updateQuality"
        :key="componentKey"
      />
    </div>
  </div>

  <div class="row gy-5 gx-xl-8 mb-8">
    <div class="col-xxl-8">
      <LeadMethods
        chart-height="500"
        :method-data="getLeadMethods"
      ></LeadMethods>
    </div>
  </div>
  <!--end::Leads-->
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import { setCurrentPageTitle } from "@/core/helpers/breadcrumb";
import LeadMethods from "@/components/leads/methods/LeadMethods.vue";
import LeadTracker from "@/components/leads/tracker/LeadTracker.vue";
import LeadService from "@/core/services/LeadService";
import ApiService from "@/core/services/ApiService";

export default defineComponent({
  name: "leads",
  components: {
    LeadMethods,
    LeadTracker,
  },
  data() {
    return {
      leadData: {},
    }
  },
  beforeMount: async function() {
    this.leadData = await new LeadService().getLeads()
  },
  setup() {
    onMounted(() => {
      setCurrentPageTitle("Lead Activity");
    });

    const sourceThreshold = 5;

    return {
      sourceThreshold,
      componentKey: 0
    };
  },
  computed: {
    getLeadMethods(): object {
      const leadMethods: Array<object> = [];
      const totalLeads = this.leadData.length;

      console.log('called getLeadMethods check this.leadData', this.leadData);

      // Get the total number of Paid Media leads
      const totalPaid = this.leadData.filter(
        lead => lead.medium == "paid_media"
      ).length;

      // Get the total number of Calls
      const totalCall = this.leadData.filter(lead => lead.leadType == "call")
        .length;

      // Separate form leads from the rest
      const formData = this.leadData.filter(lead => lead.leadType == "form");

      // Make array for form names
      const formTypes: Array<string> = [];
      this.leadData.filter(lead => {
        if (!formTypes.includes(lead.lead_form_name))
          formTypes.push(lead.lead_form_name);
      });

      // Create objects for each form by name, push to leadMethods
      formTypes.filter(type => {
        let totalFormLeads = 1;
        formData.filter(form => {
          if (form.lead_form_name == type) totalFormLeads++;
        });
        const formMethod = {
          name: type,
          description: "Lorem ipsum dolor sit amet, consectetur.",
          total: totalFormLeads,
          percent: Math.round((totalFormLeads / totalLeads) * 100)
        };
        leadMethods.push(formMethod);
      });

      const callTracking = {
        name: "Location Based Call-Tracking",
        description: "Lorem ipsum dolor sit amet, consectetur.",
        total: totalCall,
        percent: Math.round((totalCall / totalLeads) * 100)
      };
      const paidSearch = {
        name: "Paid Search",
        description: "Lorem ipsum dolor sit amet, consectetur.",
        total: totalPaid,
        percent: Math.round((totalPaid / totalLeads) * 100)
      };

      leadMethods.push(callTracking, paidSearch);

      return leadMethods;
    }
  }
});
</script>

Masalah bermula dengan fungsi pengiraan saya, saya mula menapis this.LeadData Pada asasnya setiap penapis membuang Property does not exit on type ralat, tetapi ia wujud.

Adalah penting untuk ambil perhatian bahawa apabila this.leadData ditetapkan, ia adalah proksi. Sebarang bantuan akan sangat dihargai, saya ingin tahu sama ada ia mungkin untuk menyekat ralat, walaupun saya tidak menyukai penyelesaian ini.

Sebagai contoh, dalam penapis pertama dalam kaedah pengiraan

// Get the total number of Paid Media leads
      const totalPaid = this.leadData.filter(
        lead => lead.medium == "paid_media"
      ).length;

medium ialah sifat leadData dan saya sebenarnya boleh konsol logkannya dan ia berfungsi dengan baik, tetapi ia masih sentiasa membuang medium 是 leadData 的一个属性，我实际上可以控制台记录它并且它工作得很好，但它仍然总是抛出 property does not exit on type.

Answer 1

leadData 的类型是从 data() 中的声明推断出来的。它被初始化为 {}，这意味着它的类型是一个不可变的空对象（并且不能附加任何属性）。但是，leadData 最终被分配了 LeadService().getLeads() 的返回值，所以它的类型实际上应该是 Lead Susunan objek.

Taip penegasan untuk leadData，请使用 Lead[] untuk dimasukkan dengan betul:

export default defineComponent({
  data() {
    return {
      //leadData: {}, ❌
      leadData: [] as Lead[], ✅
    }
  }
})