reactjs - 为什么此语法 Object[key] 在 typescript 中显示错误？我应该如何从对象读取属性？

Question

我想创建一个请求映射，就像一个 api 请求 url 配置，然后我可以轻松地发出一个请求，就像 ,sendRequest(name,body) 一样。 但这是 typescript 中的一些语法错误吗？很奇怪

class HttpRequest {
baseURL = "http://localhost:8080" // get this by env later
requestMap = {
    "city":{
        method:"GET",
        url: this.baseURL+"/area/city" ,
    }

}

getRequest(requestName: String, body: object | null, params:null|object) {
   return axios({
        method:this.requestMap[String(requestName)]["method"],
        url: this.requestMap[requestName]["url"] ,
        params: params? params: null,
        data:body? body:null
    })
}

Answer 1

我想您收到此错误:Type 'String' cannot be used as an index type，对吗？

您收到此错误是因为 Typescript 强制您使用有效类型来索引对象， requestMap 只有一个名为“city”的属性，当您尝试执行 this.requestMap[String(requestName)]["method"] 时，Typescript 告诉您 String 无法索引 requestMap，完全正确，该方法只存在于 city 属性中。

要解决此问题，您可以执行以下任意操作:

或者将 requestName 参数的类型更改为“city”:

 class HttpRequest {
  baseURL = "http://localhost:8080"; // get this by env later
  requestMap = {
    city: {
      method: "GET",
      url: this.baseURL + "/area/city",
    },
  };

  getRequest(requestName: 'city', body: object | null, params: null | object) {
    return axios({
      method: this.requestMap[requestName]["method"],
      url: this.requestMap[requestName]["url"],
      params: params ? params : null,
      data: body ? body : null,
    });
  }
}

或者，如果您想要一些灵活性，您可以创建一个具有 requestMap 的所有可能属性的类型，如下所示(当您确切知道该对象可以具有哪些属性时):

type RequestProps = "city" | "country";
type RequestPropsType = {
  method: string;
  url: string;
};

class HttpRequest {
  baseURL = "http://localhost:8080"; // get this by env later
  requestMap: Record<RequestProps, RequestPropsType> = {
    city: {
      method: "GET",
      url: this.baseURL + "/area/city",
    },
    country: {
      method: "GET",
      url: this.baseURL + "/area/country",
    },
  };

  getRequest(
    requestName: RequestProps,
    body: object | null,
    params: null | object
  ) {
    return axios({
      method: this.requestMap[requestName]["method"],
      url: this.requestMap[requestName]["url"],
      params: params ? params : null,
      data: body ? body : null,
    });
  }
}

但是如果你想要完全的灵活性，使requestMap可以由任何字符串索引，你可以将String更改为字符串，但在这种情况下，不能保证该属性将存在，​​所以你应该使用可选的链接运算符(available since typescript v3.7)避免访问未定义的函数:

class HttpRequest {
  baseURL = "http://localhost:8080"; // get this by env later
  requestMap = {
    city: {
      method: "GET",
      url: this.baseURL + "/area/city",
    },
  };

  getRequest(
    requestName: string,
    body: object | null,
    params: null | object
  ) {
    return axios({
      method: this.requestMap[requestName]?.["method"],
      url: this.requestMap[requestName]?.["url"],
      params: params ? params : null,
      data: body ? body : null,
    });
  }
}