如何实现支持数组响应的Supabase TS类型安全throwIfError函数

第一步：明确Supabase基础响应类型 #

先定义单个请求的响应结构，用联合类型区分成功/失败状态：

type SupabaseResponse<T> = 
  | { data: T; error: null } 
  | { data: null; error: Error };

第二步：编写支持单个/数组的泛型函数类型 #

利用TypeScript条件类型，自动判断输入是单个响应还是响应数组，返回对应非空的data类型：

type ThrowIfErrorReturn<T> = 
  T extends SupabaseResponse<infer U> 
    ? U 
    : T extends Array<SupabaseResponse<infer U>> 
      ? U[] 
      : never;

function throwIfError<T>(response: T): ThrowIfErrorReturn<T> {
  // 你的JavaScript逻辑实现：
  // 单个响应：存在error则抛出，返回非空data
  // 响应数组：遍历检查所有项，有error就抛出，收集所有非空data返回
  if (Array.isArray(response)) {
    const errors = response.filter(r => r.error).map(r => r.error);
    if (errors.length) throw new Error(errors.map(e => e.message).join('; '));
    return response.map(r => r.data) as ThrowIfErrorReturn<T>;
  } else {
    if (response.error) throw response.error;
    return response.data as ThrowIfErrorReturn<T>;
  }
}

第三步：类型安全的用法示例 #

// 单个请求场景
const singleResponse: SupabaseResponse<string> = { data: 'foo', error: null };
const singleData = throwIfError(singleResponse);
// singleData类型自动推导为string（非空）

// Promise.all返回的数组场景
const responses: SupabaseResponse<number>[] = [
  { data: 1, error: null },
  { data: 2, error: null }
];
const arrayData = throwIfError(responses);
// arrayData类型自动推导为number[]（所有元素非空）

// 失败场景：运行时抛出错误，TypeScript识别返回值为never（不会执行后续代码）
const failedResponse: SupabaseResponse<string> = { data: null, error: new Error('请求失败') };
const failedData = throwIfError(failedResponse);
// failedData类型为never

这套类型定义的核心是通过ThrowIfErrorReturn条件类型，自动适配单个响应和数组两种输入场景，同时保证类型层面和运行时的双重安全。

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