TypeScript中如何将泛型参数作为方法选项消除传参冗余

架构老林

2026-8-29

优化方案

当前冗余问题的核心是泛型参数与type入参没有做类型绑定，TypeScript无法根据传入的type值自动推导对应的响应类型，才需要手动重复指定类型。最合理的实现是建立responseType取值和返回类型的映射关系，让TS自动推导返回值类型，完全省略手动传入泛型的步骤。

首先定义类型映射表，对应XHR标准中不同responseType对应的返回值类型：

type ResponseTypeMap = {
  arraybuffer: ArrayBuffer;
  document: Document;
  blob: Blob;
  json: unknown; // 可根据需要改成any，json场景可额外做类型断言
  text: string;
}

改造原方法，用泛型约束入参type的取值范围，返回值直接从映射表中取对应类型：

private descargar<K extends keyof ResponseTypeMap>(
  url: string, 
  type: K
): Promise<ResponseTypeMap[K] | null> {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = type;
    xhr.onload = () => {                              
      resolve(xhr.response);
    };
    xhr.onerror = () => resolve(null);
    xhr.open("GET", url);
    xhr.send();
  })
}

改造后调用时不需要再手动传入泛型参数，TS会根据你传入的type值自动推导返回类型：

// 自动推导response类型为 Blob | null
const response = await this.descargar(url, "blob");

// 其他场景自动对应类型
const textContent = await this.descargar(url, "text"); // string | null
const jsonData = await this.descargar(url, "json"); // unknown | null
const fileBuffer = await this.descargar(url, "arraybuffer"); // ArrayBuffer | null