He estado jugando con clases de aprendizaje y TypeScript, y encontré un error que no entiendo; espero que alguien pueda ayudarme.
He creado la siguiente interfaz:
export default interface IServerApi { url: string call: string }Y luego creo una clase que debería hacer mis apicales así:
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 } }Sin embargo, aparece un error de TS debajo de this.url con el siguiente mensaje:
any Property 'url' does not exist on type 'typeof ApiCall'.ts(2339)¿Alguien puede indicarme qué está pasando aquí? Pensé que this.url haría referencia a la URL establecida en el constructor, y luego podría pasar algo como this.url a los métodos. El objetivo sería simplemente poder llamar a ApiCall.getAll() en lugar de volver a escribir una búsqueda.
¡Gracias!
El problema está relacionado con una llamada de método de estado, el método getAll es estático y los métodos estáticos no tienen esta referencia.
Hay 3 soluciones para esto
async getAll()public static url const instance = new ApiCall("", ""); const response = await fetch(`${instance.url}/${this.call}`);Recomendado para su problema:
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 } }