TypeScript错误处理：类型安全与工程实践

1. TypeScript错误处理基础认知在TypeScript项目中错误处理不是简单的try/catch语法糖而是类型系统与运行时安全的双重保障机制。与纯JavaScript不同TypeScript的错误处理需要考虑类型注解对错误传播的影响。举个例子当我们定义了一个返回number类型的函数函数内部却可能抛出异常时类型系统并不会自动将这个异常情况反映在类型签名中——这正是需要开发者特别注意的地方。JavaScript原生的Error类在TypeScript中可以直接使用但存在几个关键差异点类型声明需要显式标注Error类型catch块中的错误对象默认是any类型除非启用useUnknownInCatchVariables异步错误处理需要配合Promise类型// 典型错误处理结构 function riskyOperation(): number { if (Math.random() 0.5) { throw new Error(Random failure); } return 42; } try { const result riskyOperation(); console.log(result.toFixed(2)); } catch (err) { // err默认是any类型 if (err instanceof Error) { console.error(Caught: ${err.message}); } }重要提示在tsconfig.json中启用useUnknownInCatchVariables: true可以让catch变量默认为unknown类型这比any更安全强制开发者做类型检查后再使用错误对象。2. TypeScript特有的错误类型策略2.1 自定义错误类型体系在大型TypeScript项目中建议建立完整的错误类型体系。不同于JavaScript随意抛出任意值TypeScript的类型系统可以帮助我们构建更安全的错误处理流程class NetworkError extends Error { constructor(public statusCode: number, message?: string) { super(message); this.name NetworkError; } } class ValidationError extends Error { constructor(public field: string, message?: string) { super(message); this.name ValidationError; } } function processInput(input: string) { if (!input) { throw new ValidationError(input, Cannot be empty); } // ... }这种模式的优势在于错误分类明确便于在catch块中做类型区分可以附加元数据如statusCode、field等类型守卫可以精确缩小错误范围2.2 类型安全的错误处理函数利用TypeScript的泛型和类型推断我们可以创建类型安全的错误处理工具函数type ResultT, E extends Error { success: true; value: T } | { success: false; error: E }; function safeTryT, E extends Error( fn: () T, errorType: new (...args: any[]) E ): ResultT, E { try { return { success: true, value: fn() }; } catch (err) { if (err instanceof errorType) { return { success: false, error: err }; } throw err; // 重新抛出非预期错误 } } // 使用示例 const result safeTry(() JSON.parse(invalid), SyntaxError); if (!result.success) { console.error(Parse failed: ${result.error.message}); }3. 异步场景下的错误处理3.1 Promise链的错误传播TypeScript对Promise的错误处理有特殊的类型约束。未处理的Promise拒绝会导致类型检查警告当启用strictNullChecks时async function fetchData(url: string): PromiseData { const response await fetch(url); if (!response.ok) { throw new NetworkError(response.status, HTTP error: ${response.status}); } return response.json(); } // 正确用法必须处理可能的拒绝 fetchData(/api/data) .then(data console.log(data)) .catch((err: NetworkError) console.error(err.status));3.2 async/await的错误处理模式在async函数中错误处理有两种推荐模式模式一try/catch块async function process() { try { const data await fetchData(/api); const result validate(data); // ... } catch (err) { if (err instanceof NetworkError) { // 处理网络错误 } else if (err instanceof ValidationError) { // 处理验证错误 } else { // 未知错误 throw err; } } }模式二错误优先返回type AsyncResultT, E extends Error Promise{ data?: T; error?: E }; async function safeProcess(): AsyncResultProcessedData, AppError { const { data, error } await fetchData(/api).catch(err ({ error: err })); if (error) return { error }; try { return { data: processData(data) }; } catch (err) { return { error: new ProcessingError(err) }; } }4. 高级错误处理模式4.1 错误边界与类型守卫在ReactTypeScript项目中错误边界组件需要特殊类型处理interface ErrorBoundaryProps { fallback: React.ReactNode; children: React.ReactNode; } interface ErrorBoundaryState { hasError: boolean; error?: Error; } class ErrorBoundary extends React.ComponentErrorBoundaryProps, ErrorBoundaryState { state: ErrorBoundaryState { hasError: false }; static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error }; } componentDidCatch(error: Error, info: React.ErrorInfo) { logErrorToService(error, info.componentStack); } render() { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } }4.2 声明式错误处理使用TypeScript的条件类型和映射类型可以创建声明式的错误处理系统type ErrorHandlers { [K in ErrorType]?: (error: ExtractAppError, { type: K }) void; }; function handleErrors( error: AppError, handlers: ErrorHandlers ) { const handler handlers[error.type as ErrorType]; if (handler) { handler(error as never); } else { defaultHandler(error); } }5. 工程化最佳实践5.1 错误监控集成在TypeScript项目中配置Sentry这样的错误监控服务时需要类型增强declare global { interface Window { Sentry?: { captureException: (error: unknown) void; configureScope: (callback: (scope: any) void) void; }; } } function reportError(error: unknown) { if (window.Sentry) { if (error instanceof Error) { window.Sentry.captureException(error); } else { window.Sentry.captureException(new Error(String(error))); } } }5.2 测试中的错误断言使用Jest或Mocha进行测试时TypeScript需要特殊处理来断言错误describe(error cases, () { it(should throw ValidationError, () { // 必须使用函数包装 expect(() parseInput()).toThrow(ValidationError); }); it(should reject with NetworkError, async () { await expect(fetchData(invalid://url)).rejects.toThrow(NetworkError); }); });5.3 编译时错误检查利用TypeScript的never类型进行穷尽检查function handleError(error: AppError) { switch (error.type) { case Network: // 处理网络错误 break; case Validation: // 处理验证错误 break; default: // 确保处理了所有情况 const _exhaustiveCheck: never error; return _exhaustiveCheck; } }6. 常见问题与解决方案6.1 Error对象扩展问题在TypeScript中扩展Error类需要注意原型链问题class MyError extends Error { constructor(message?: string) { super(message); Object.setPrototypeOf(this, new.target.prototype); // 修复原型链 this.name MyError; } }6.2 第三方库的错误类型处理第三方库的错误时推荐使用类型断言守卫function isAxiosError(err: unknown): err is AxiosError { return (err as AxiosError).isAxiosError true; } try { await axios.get(/api); } catch (err) { if (isAxiosError(err)) { console.error(err.response?.status); } }6.3 错误类型窄化技巧使用自定义类型守卫精确缩小错误类型范围function isErrorOfTypeT extends Error( error: unknown, errorType: new (...args: any[]) T ): error is T { return error instanceof errorType; } try { // ... } catch (err) { if (isErrorOfType(err, NetworkError)) { // 这里err已窄化为NetworkError retryRequest(err); } }在TypeScript项目中进行错误处理时最关键的认知转变是将运行时错误转化为类型系统可以理解的结构。这意味着我们需要避免直接抛出原始值始终使用Error或其子类为不同的错误场景创建专门的错误类型利用泛型和联合类型表达可能的错误结果在异步代码中明确错误传播路径通过类型守卫确保错误处理的类型安全这种类型驱动的错误处理方式虽然初期需要更多类型定义工作但能为大型项目带来更好的可维护性和更少的运行时意外。当整个团队都遵循这种模式时代码中意外出现的错误会显著减少而预期的错误情况都能得到妥善处理。