Angular严格模式下如何初始化Observable？两种初始化方案如何选型

Angular Strict模式要求所有类属性必须完成初始化，针对Observable类型属性的两种常见初始化方案的优缺点和选型建议如下：

方案1：使用of()返回的带默认值的Observable初始化 #

代码示例：

public obj$: Observable<MyObj | null> = of(null)
public name$: Observable<string> = of('')
public arr$: Observable<Something[]> = of([])

优点 #

• 完全符合Strict模式的类型校验规则，类型声明和实际值完全匹配，无需额外非空断言
• 模板中直接通过async管道订阅即可正常渲染，默认值可直接作为兜底展示，不会抛出空引用错误
• 搭配combineLatest、withLatestFrom等要求源流至少发出一个值的组合操作符时不会卡住，组合流可以立即触发计算
• 调试成本更低，订阅后可立即拿到已知初始值，便于快速排查逻辑问题

缺点 #

• 无业务意义的默认值可能触发不必要的视图重绘或业务逻辑执行，比如后续接口请求返回真实数据前，空数组/空字符串会先触发一次渲染
• 对于无合理默认值的业务对象，强制添加| null联合类型后，需要在所有消费该流的地方做非空判断，增加冗余代码

方案2：使用NEVER初始化Observable #

NEVER是RxJS提供的永远不会发出值、也不会触发complete和error回调的特殊Observable
代码示例：

public myObs$: Observable<Something> = NEVER
public name$: Observable<string> = NEVER
public arr$: Observable<Something[]> = NEVER

优点 #

• 不会发出多余的初始值，不会触发无意义的业务逻辑和视图更新，适合必须等待异步操作（接口请求、用户交互）返回后才会有有效数据的场景
• 不需要设置无意义的默认值，类型声明可以更精准，无需额外添加| null之类的联合类型，也不用在消费侧写冗余的非空判断

缺点 #

• 搭配combineLatest等组合操作符时，如果后续没有给流赋值会发出值的Observable，组合流会永远卡住，不会触发任何回调
• 模板中直接用async管道订阅时，会一直停留在初始空状态，如果没有配合骨架屏、加载提示等UI，用户会误以为页面卡顿
• 排查问题成本更高，如果后续流赋值逻辑出错，流永远不会返回值，很难快速定位是初始化问题还是后续赋值逻辑问题

选型建议 #

不需要统一用某一种方案，可根据业务场景灵活选择：

• 流有合理默认值、需要和其他流做组合运算、模板需要兜底渲染的场景，选of()初始化方案
• 流的初始值无业务意义、必须等待异步操作返回后才会有有效数据、不会参与需要初始值的组合运算的场景，选NEVER初始化方案
• 若选择NEVER方案，建议在模板中配合加载状态组件使用，避免用户感知到长时间空白

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