TypeScript类型安全全局错误处理器：解决智能提示丢失问题

算力阿峰

2026-8-2

解决方案：带类型安全的全局错误处理器

要解决data丢失智能提示的问题，核心是正确利用TypeScript泛型明确返回类型，同时修正调用方式中的异步处理问题，具体实现如下：

1. 定义带泛型的错误处理器

async function errorHandler<T>(func: () => Promise<T>): Promise<[T, null] | [null, Error]> {
  try {
    const result = await func();
    return [result, null];
  } catch (err) {
    console.error(err);
    // 确保错误始终是Error类型，避免类型混乱
    return [null, err instanceof Error ? err : new Error(String(err))];
  }
}

关键细节：

泛型<T>：让函数自动推断传入异步函数的返回值类型，比如fetch返回Promise<Response>，T会被自动解析为Response。
明确返回类型：Promise<[T, null] | [null, Error]>告诉TypeScript，函数返回的Promise只能是两种元组之一——成功时返回[结果, null]，失败时返回[null, 错误]，彻底避免any导致的类型丢失。

2. 正确调用并获得智能提示

async function mainFunction() {
  const url = "https://jsonplaceholder.typicode.com/todos/";
  // 自动推断data为Response类型，error为Error | null
  const [data, error] = await errorHandler(() => fetch(url));

  if (error) {
    console.error("请求失败:", error.message);
    return;
  }

  // 这里data会自动触发Response的智能提示，比如.json()/.text()等方法
  const todos = await data.json();
  console.log(todos);
}

mainFunction();

调用时的注意事项：

必须await错误处理器：因为errorHandler是异步函数，直接解构会拿到Promise对象而非实际结果，这是之前丢失智能提示的核心原因之一。
传入函数而非直接传入Promise：要传() => fetch(url)而非fetch(url)，保证errorHandler内部能正确执行异步逻辑，同时让TypeScript准确推断返回类型。
利用类型守卫：if (error)会触发TypeScript的类型收缩——当错误存在时，TypeScript知道data是null；当错误不存在时，自动识别data为泛型T的类型，从而启用智能提示。