📚 课程目录第3章 TypeScript与RxJS面试必考

TypeScript与RxJS面试必考：类型系统、泛型、装饰器、Observable、Subject、操作符

  本章定位：TypeScript 类型系统与 RxJS 响应式编程是 Angular 研发的核心技能，面试中高频覆盖泛型约束、装饰器原理、Observable 与 Subject 差异以及常见操作符链式写法。掌握结构化回答框架可提升面试通过率。

▲ 回答框架：从需求 → 类型 → 泛型 → RxJS 管道 → 边界处理

面试问题 1：TypeScript 中泛型的常见使用场景及约束方式有哪些？

考察点	泛型基础、约束语法（extends）、内置工具类型（Partial、Record）；能否在实际场景中应用。
回答框架	① 泛型本质是类型参数化；② 常见场景：函数/类/接口复用、约束输入输出类型关系；③ 约束方式：`extends` 限制类型范围、`keyof` 获取键联合；④ 内置工具类型提升开发效率。
简短示例回答	“泛型让组件保持类型安全。比如封装 API 请求函数：`function fetchData(url: string): Promise { … }`，用 `extends` 约束 T 必须包含 id 属性。还常用 `Partial<T>` 实现可选字段更新。”
可能追问	泛型约束与条件类型区别？`infer` 关键字用途？如何设计一个类型安全的 `debounce` 函数？
避坑提醒	避免过度泛型导致类型复杂难读；不要遗漏 `extends` 约束导致运行时错误。

面试问题 2：RxJS 中 Observable 与 Subject 的区别是什么？

考察点	冷热观察者模式、Subject 多播特性、BehaviorSubject/ReplaySubject 变体。
回答框架	① Observable 是“冷”的，每次订阅独立执行生产者函数；② Subject 是“热”的，通过 next 主动推送值，多订阅者共享；③ 常用变体：BehaviorSubject（初始值+最新值）、ReplaySubject（重放历史值）。
简短示例回答	“Observable 像 DVD 播放，每个订阅者从头播放；Subject 像电台广播，所有订阅者同时接收。我在状态管理中使用 BehaviorSubject 管理当前用户，订阅时立即获得最新值。”
可能追问	AsyncSubject 适用场景？如何手动取消订阅避免内存泄漏？Subject 内部实现原理？
避坑提醒	Subject 不提供初始值易导致订阅者等待；忘记在 ngOnDestroy 中 complete/unsubscribe 会引发内存泄漏。

面试问题 3：如何使用 RxJS 操作符实现搜索防抖并处理竞态？

考察点	debounceTime、switchMap、distinctUntilChanged 组合使用；竞态原因与解决方案。
回答框架	① 从 input 事件创建 Observable；② 管道中依次：`debounceTime(300)` 防抖、`distinctUntilChanged()` 过滤重复、`switchMap()` 切换最新请求；③ 旧请求自动取消，避免乱序。
简短示例回答	“用 `fromEvent(input, 'keyup').pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => this.searchService.query(term)))`。switchMap 确保只保留最后一次请求结果，完美解决竞态。”
可能追问	exhaustMap vs switchMap 区别？如何添加 loading/error 状态？无限滚动场景如何用 mergeMap？
避坑提醒	忘记 distinctUntilChanged 会增加无效请求；switchMap 适合只关心最新结果，否则改用 mergeMap。

▲ 追问路径：面试官常从泛型函数封装逐渐深入 RxJS 操作符细节

📁 项目案例：企业级后台管理系统 — 搜索功能模块

项目名称	AdminPro 企业资源管理平台
业务背景	支持多租户的权限管理后台，提供全局搜索用户、角色、菜单，要求实时输入建议且不卡顿。
规模指标	5 个微前端子应用，日均搜索请求 12 万+；搜索结果列表含排序、分页、导出。
技术栈	Angular 15 + TypeScript 5 + RxJS 7 + NgRx（状态管理）+ Jest（单元测试）
核心难点	① 高并发下竞态请求导致旧结果覆盖新结果；② 搜索词快速变化时频繁创建/销毁 Observable；③ 需要为不同模块的搜索返回类型（用户、角色、菜单）提供统一泛型接口。
面试高频追问	如何设计可复用的搜索 Service？如何用泛型约束返回类型？`switchMap` 内部如何取消订阅？如果改用 `exhaustMap` 会有什么副作用？
可迁移回答话术	“我采用 `searchService.query<T>(term, type)` 泛型方法，内部使用 `fromEvent` + `debounceTime` + `switchMap` 管道。通过 `type: 'user' \| 'role'` 联合类型约束输入，并结合 `distinctUntilChanged` 减少重复请求。最终用 BehaviorSubject 维护搜索结果状态，保证 UI 与数据一致。”

⚠️ 避坑总结：① TypeScript 中避免“any”泛滥，善用泛型约束和工具类型；② RxJS 操作符选择需理解“取消 vs 排队”语义，常见失误是混用 switchMap/exhaustMap 导致行为不符合预期；③ 搜索模块务必在组件销毁时 takeUntil 或 unsubscribe，防止内存泄漏。