Angular中TypeScript安全访问HttpErrorResponse error属性的方案

方案1：自定义类型守卫（Type Guard） #

通过类型守卫函数明确缩小error.error的类型范围，让TypeScript和ESLint认可属性访问的安全性，同时保留类型检查的严谨性。

首先定义API错误的类型接口，再实现类型守卫：

// 定义API返回的错误结构类型
interface ApiError {
  errorCode: keyof typeof ApiErrorCodes;
}

// 类型守卫函数，判断传入值是否符合ApiError结构
function isApiError(error: any): error is ApiError {
  return (
    typeof error === 'object' &&
    error !== null &&
    'errorCode' in error &&
    typeof error.errorCode === 'string' &&
    // 可选：额外校验errorCode是否在ApiErrorCodes的键集合中
    error.errorCode in ApiErrorCodes
  );
}

在获取错误信息的函数中使用类型守卫：

private getErrorMessage(error: HttpErrorResponse): string | undefined {
  if (isApiError(error.error)) {
    // 此时TypeScript已确认error.error符合ApiError类型，访问errorCode无类型报错
    return ApiErrorCodes[error.error.errorCode];
  }
  return undefined;
}

方案2：内联类型缩小（Inline Type Narrowing） #

直接在函数内部通过类型检查缩小error.error的范围，无需单独定义守卫函数，适合简单场景：

private getErrorMessage(error: HttpErrorResponse): string | undefined {
  const apiError = error.error;
  
  // 逐步校验对象存在性、属性存在性及属性类型
  if (
    apiError &&
    typeof apiError === 'object' &&
    'errorCode' in apiError &&
    typeof apiError.errorCode === 'string'
  ) {
    // 断言errorCode为ApiErrorCodes的键类型，确保索引访问安全
    const errorCode = apiError.errorCode as keyof typeof ApiErrorCodes;
    return ApiErrorCodes[errorCode];
  }
  
  return undefined;
}

方案3：可选链结合类型校验 #

利用可选链简化空值判断，再通过类型校验确保errorCode的有效性：

private getErrorMessage(error: HttpErrorResponse): string | undefined {
  const errorCode = error?.error?.errorCode;
  
  // 校验errorCode是字符串且属于ApiErrorCodes的键
  if (typeof errorCode === 'string' && errorCode in ApiErrorCodes) {
    return ApiErrorCodes[errorCode as keyof typeof ApiErrorCodes];
  }
  
  return undefined;
}

以上方案均无需修改HttpErrorResponse的原始类型定义，既解决了类型不安全访问的报错，也能在API返回结构意外变化时提供清晰的错误边界处理。

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