TS类型错误：ArrayBuffer无法赋值给Blob 不改返回类型如何修复

首先明确两个核心问题的答案：

• 无需修改downloadIt方法的返回值类型即可修复该类型错误
• 类型转换（TypeScript中称为类型断言）完全可以解决这个类型不匹配问题，且不存在运行时风险

报错根因 #

该错误不是运行时逻辑问题，是TypeScript类型推导偏差导致的：部分版本Angular的HttpClient对responseType: 'blob'配置的类型推导存在bug，即使运行时接口实际返回的是Blob对象，类型系统仍会将响应值推导为ArrayBuffer类型，最终导致返回的{file, url}对象和方法声明的返回类型{ file: Blob; url: string; }不匹配。

修复方案 #

方案1：使用类型断言（类型转换）修复 #

直接在map操作中对拿到的响应值做类型断言，明确告知TS该值的实际类型为Blob即可，修改后代码如下：

private downloadIt(url: string, applicationData: any, getRequest?: boolean): Observable<{ file: Blob, url: string }> {        
    return this.http.get(url, applicationData, { responseType: 'blob' }).pipe(
        map(file => {
            // 类型断言：明确标记响应值为Blob类型
            const blobFile = file as Blob;
            const objectUrl = this.window.window.URL.createObjectURL(blobFile);
            return { file: blobFile, url: objectUrl };
        })
    );
}

该写法安全：因为你已经显式配置了responseType: 'blob'，运行时HttpClient返回的确实是Blob实例，不会出现类型和实际值不符的问题。

方案2：从源头修正HttpClient的响应类型（更规范） #

除了类型断言外，更推荐显式指定http.get的泛型参数，让类型系统从请求发起时就正确识别响应类型，不需要额外加断言：

private downloadIt(url: string, applicationData: any, getRequest?: boolean): Observable<{ file: Blob, url: string }> {        
    // 显式指定get方法返回值类型为Blob
    return this.http.get<Blob>(url, { ...applicationData, responseType: 'blob' }).pipe(
        map(file => {
            const objectUrl = this.window.window.URL.createObjectURL(file);
            return { file, url: objectUrl };
        })
    );
}

补充：原代码中http.get传参顺序存在小问题：Angular HttpClient的get方法只接收两个参数，第一个是请求url，第二个是完整的请求配置对象，请求参数、responseType等配置都需要放在第二个配置对象中，不要单独拆成第三个参数传，否则配置不会生效。

内容的提问来源于stack exchange，提问作者user1753377