Question

0

137

Views

Property Does Not Exist on TypeOf, Understanding Classes Better

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!

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-07-05T14:00:40.380Z

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

Remove static from getAll async getAll()
Add static keyword in URL. public static url
Create an instance of the current class and use

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