TypeOf 上不存在属性，更好地理解类

Question

我一直在学习课程和 TypeScript，遇到了一个我不明白的错误 - 希望有人可以帮助我。

我已经创建了如下界面：

export default interface IServerApi {
  url: string
  call: string
}

然后我创建了一个应该使我的 apicalls 成为这样的类：

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

但是，我在 this.url 下面收到一个 TS 错误，并显示以下消息：

any
Property 'url' does not exist on type 'typeof ApiCall'.ts(2339)

谁能指出这里发生了什么？我认为 this.url 会引用构造函数中设置的 url，然后我可以将类似 this.url 的内容传递给方法。目标是能够调用 ApiCall.getAll() 而不是重写 fetch。

谢谢！

Answer 1

问题与状态方法调用有关，getAll 方法是静态的，静态方法没有这个引用。

有3个解决方案

1. 从 getAll 中删除静态 async getAll()
2. 在 URL 中添加静态关键字。 public static url
3. 创建当前类的实例并使用

    const instance = new ApiCall("", "");
    const response = await fetch(`${instance.url}/${this.call}`);

针对您的问题推荐：

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