CSharp-n
CSharp-n

Reputation: 341

how to fix the error : Property 'X' does not exist on type '{ object }'

I'm new the vuejs and i have this error in my vue file

Property 'ClientsSrv' does not exist on type '{ name: string; props: {}; data(): { ClientsSrv: ClientsService | null; ClientsList: ClientsModel[] | null; IsReady: boolean; }; mounted(): Promise; }'.

<script lang="ts">
import ClientsService from "@/Services/Clients/ClientsService"; 
import IClientsModel from  "@/Models/ClientsModel"; 
export default {
  name: "Clients",
  props: {
    
  },
  data() : {ClientsSrv:ClientsService|null;ClientsList:IClientsModel[]|null; IsReady:boolean}  {
    
    return {
      ClientsSrv: null,
      ClientsList: null,
      IsReady: false,
    }; 
  },
 
  async mounted() : Promise<void> {
    
    this.ClientsSrv = new ClientsService();
    this.ClientsList = await this.ClientsSrv.GetClients();
    
    if(this.ClientsList!=null) 
    {
      this.IsReady = true;
      }
  },
};
</script>

could someone help with that please ?

Upvotes: 1

Views: 2853

Answers (2)

tauzN
tauzN

Reputation: 6931

To let TypeScript properly infer types inside Vue component options, you need to define components with defineComponent global method. source

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
})
</script>

I would also recommend infering types on reactive data like this:

data() {
    return {
      ClientsSrv: null as ClientsService | null,
      ClientsList: null as IClientsModel[] | null,
      IsReady: false as boolean,
    };
  }

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

To get types inference you should define your component using defineComponent like :

<script lang="ts">
import ClientsService from "@/Services/Clients/ClientsService"; 
import IClientsModel from  "@/Models/ClientsModel"; 

import {defineComponent} from 'vue'

export default defineComponent({
  ....
});
</script>

Upvotes: 1

Related Questions