I've been playing around with learning classes and TypeScript, and I encountered an error I do not understand - hopefully someone can help me.
I've created the following interface:
export default interface IServerApi {
url: string
call: string
}
And then I create a class that ought to make my apicalls as so:
class ApiCall implements IServerApi {
public url: string
public call: string
constructor(apiUrl: string, apiEndpoint: string) {
this.url = process.env.REACT_APP_SERVER_URL as string
this.call = "products"
}
static async getAll() {
const response = await fetch(`${this.url}/${this.call}`)
const data = await response.json()
return data
}
}
However,I get a TS error underneath this.url with the following message:
any
Property 'url' does not exist on type 'typeof ApiCall'.ts(2339)
Can anyone point me to what's going on here? I thought that this.url would reference the url set in the constructor, and then I could pass something like this.url down into the methods. The goal would be to just be able to call ApiCall.getAll() instead of rewriting a fetch.
Thank you!
The issue is related to a state method call, getAll method is static and static methods do not have this reference.
There are 3 solutions for this
async getAll()public static url const instance = new ApiCall("", "");
const response = await fetch(`${instance.url}/${this.call}`);
Recommended for your problem:
export default interface IServerApi {
url: string
call: string
}
class ApiCall implements IServerApi {
public static url: string = process.env.REACT_APP_SERVER_URL as string
public call: string
constructor(apiUrl: string, apiEndpoint: string) {
this.call = "products"
}
static async getAll() {
const response = await fetch(`${ApiCall.url}/${this.call}`)
const data = await response.json()
return data
}
}