类型“{}”缺少类型“IResponseConfig”中的以下属性

Question

所以遇到了另一个模糊的 Typescript 错误。

我有以下函数fetchAllAssets ，它以调度动作并通过名为formatAssets的函数运行responses formatAssets 。

错误在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
    };
  });

错误

“[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}]”类型的参数不可分配给“IResponseConfig[]”类型的参数。 类型“{}”缺少类型“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);

^{注意：有关为什么<T>(array T[]) => ...无法按预期解析的讨论，请参阅此问题。}

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

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