My experience with TypeScript is limited, and I'm facing an issue. The code appears as follows:
1) Main.ts:
import gpbApi from '@/utils/api/gpbApi';
@Component
export default class ExtendedDetailAccountComponent extends mixins(CurrentUserMixin) {
...
async created() {
try {
console.log('gpbApi =', gpbApi);
const result = await gpbApi.leadService.getReqtypes();
console.log('result =', result);
} catch (error) {
console.log('error = ', error);
}
}
...
2) vue.d.ts:
import gpbApi from './utils/api/gpbApi';
declare module 'vue/types/vue' {
interface Vue {
$gpbApi: typeof gpbApi;
}
}
3) gpbApi.ts:
import leadService from '@/utils/api/leadService';
class GpbApi {
leadService!: typeof leadService;
}
const instance = new GpbApi();
export default instance;
4) leadService.ts:
import axios from 'axios';
const path = '...';
class LeadService {
async getReqtypes() {
const { data } = await axios.get(`${path}/Reqtype`, { withCredentials: true });
return data.data;
}
}
const instance = new LeadService();
export default instance;
I am encountering the following error:
leadService: undefined
error = TypeError: Cannot read properties of undefined (reading 'getReqtypes')
at VueComponent.created
What is the solution to resolve this error?