javascript - 类型 '{}' 缺少类型 'IResponseConfig' 的以下属性

Question

因此遇到另一个模糊的 Typescript 错误。

我有以下函数 fetchAllAssets，它以分派(dispatch)一个 Action 并通过名为 formatAssets 的函数运行 responses 结束。

错误在 responses 数组上。

export const fetchAllAssets = () => (dispatch: DispatchAllAssets) => {
  dispatch(actionGetAllAssets());
  return fetchAll([getPrices(), getAvailableSupply()]).then((responses) =>
    dispatch(actionSetAllAssets(formatAssets(responses))));
}

formatAssets 函数:

export const formatAssets = (responses: IResponseConfig[]) => {
  let prices: any;
  let availableSupplies: any;
  console.log('responses', responses);
  responses.forEach((response: IResponseConfig) => {
    const { config } = response;
    const { url } = config;
    if (url.includes('prices')) {
      prices = response.data;
    } else if (url.includes('dashboard')) {
      availableSupplies = cleanAssets(response.data);
    }
    return {
      prices,
      availableSupplies
    };
  });

错误

Argument of type '[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]' is not assignable to parameter of type 'IResponseConfig[]'. Type '{}' is missing the following properties from type 'IResponseConfig': config, data ts(2345)

IResponseConfig 的界面如下所示:

export interface IResponseConfig {
  config: {
    adapter: any;
    baseUrl: string;
    headers: {};
    maxContentLength: number;
    method: string;
    params: {
      key: string;
    }
    timeout: number;
    transformRequest: {};
    transformResponse: {};
    url: string;
    validateStatus: any;
    xsrfCookieName: string;
    xsrfHeaderName: string;
  };
  data: IAssetResponse[];
  headers?: {};
  request?: XMLHttpRequest;
  upload?: XMLHttpRequestUpload;
  status?: number;
  statusText?: string;
}

响应是这样的:

为了消除错误，IResponseConfig 应该采用什么形状？

fetchAll 的签名

// @TODO Fix any type.
export const fetchAll = (array: any) => Promise.all(array);

我还可以通过将所有键设置为可选(hack？)来消除错误

export interface IResponseConfig {
  config?: any;
  data?: IAssetResponse[];
  headers?: any;
  request?: XMLHttpRequest;
  upload?: XMLHttpRequestUpload;
  status?: number;
  statusText?: string;
}

IAssetResponse 是什么样的(我关心的实际数据)

export interface IAssetResponse {
  [key: string]: string | undefined;
  currency: string;
  price?: string;
  availableSupply?: string;
  maxSupply?: string;
}

Answer 1

看起来你需要定义fetchAll作为一个通用函数，像这样:

export const fetchAll = <T extends {}>(array: (T | Promise<T>)[]) => Promise.all(array);

^{注意:参见 this question讨论为什么 <T>(array T[]) => ...无法像您预期的那样解析。}

假设 getPrices和 getAvailableSupply两者都返回 IResponseConfig或 Promise<IResponseConfig> , 参数 responses将被推断为 IResponseConfig[] 类型.

如果不是这种情况，您可能必须添加一些额外的转换、类型提示或断言以将它们强制为一致的接口(interface)。