如何修复错误：“{ object }”类型上不存在属性“X”

Question

我是 vuejs 的新手，我的 vue 文件中有这个错误

类型 '{ name: string; 上不存在属性 'ClientsSrv'道具： {};数据（）：{ ClientsSrv：ClientsService |空值;客户列表：客户模型 [] |空值; IsReady：布尔值； };挂载（）：承诺； }'。

<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>

有人可以帮忙吗？

Answer 1

为了让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 defineComponent 全局方法定义组件。 source

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

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

---

我还建议像这样根据反应性数据推断类型：

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

Answer 2

要获得类型推断，您应该使用 defineComponent 定义您的组件，例如：

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

import {defineComponent} from 'vue'

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