Vue+TS开发时报错Property 'ClientsSrv' does not exist on type如何解决

这个报错是选项式API配合TypeScript使用时的典型类型推断问题：当你没有使用Vue官方提供的defineComponent工具函数包裹组件定义时，TypeScript无法将data函数中声明的字段正确关联到组件实例的this类型上，因此访问this.ClientsSrv等自定义属性时，就会触发「属性不存在」的类型错误。

步骤1：导入defineComponent #

首先从Vue包中导入工具函数：

// Vue3 或 Vue2.7+ 直接从vue导入
import { defineComponent } from 'vue'

// 若使用Vue2.6及更早版本，需先安装@vue/composition-api依赖，再按以下方式导入
// import { defineComponent } from '@vue/composition-api'

步骤2：包裹组件定义 #

将原本直接导出的组件对象用defineComponent包裹即可，其余原有代码不需要改动，修复后的完整代码如下：

<script lang="ts">
import { defineComponent } from 'vue'
import ClientsService from "@/Services/Clients/ClientsService"; 
import IClientsModel from  "@/Models/ClientsModel"; 

export default defineComponent({
  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>

内容的提问来源于stack exchange，提问作者CSharp-n