Angular组件从Observable赋值变量时编译错误排查

问题现象 #

在Angular组件的ngOnInit中，使用Redux Store的select方法订阅数据时，直接打印数据的代码可正常运行，但尝试将数据赋值给组件变量时，编译抛出错误：Type 'void' is not assignable to type 'string'。即使添加数据非空判断，错误依然存在。

相关代码片段：

ngOnInit() {
    this.strSub = this._store.select(selectStr).subscribe((data) => console.log(data)); // 正常运行
    // this.strSub = this._store.select(selectStr).subscribe((data) => {this.str = data}); // 编译报错
}

问题根源 #

错误核心出在Selector.ts的selectStr选择器定义上：

export const selectStr = createSelector(myTopLevelSelector, (state) => {state.str});

这里的箭头函数使用了花括号{}但未显式返回state.str。在TypeScript中，带花括号的箭头函数若无return语句，默认返回void，导致selectStr的返回类型变为Observable<void>，而非期望的Observable<string>。当组件尝试将void类型值赋值给string类型的this.str时，就会触发类型不匹配的编译错误。

解决方案 #

修改Selector.ts中的selectStr选择器，确保箭头函数正确返回state.str，有两种方式：

方式1：使用简洁箭头函数（去掉花括号） #

export const selectStr = createSelector(myTopLevelSelector, (state) => state.str);

方式2：保留花括号，添加显式return语句 #

export const selectStr = createSelector(myTopLevelSelector, (state) => {
    return state.str;
});

修改后，selectStr的返回类型会正确推断为Observable<string>，此时组件中赋值的代码可正常编译运行：

this.strSub = this._store.select(selectStr).subscribe((data) => {
    this.str = data;
});

额外优化建议 #

在Angular中，更推荐使用**异步管道（Async Pipe）**直接在模板中订阅Observable，无需手动管理Subscription，减少内存泄漏风险：

1. 组件中定义Observable变量：

observable$: Observable<string>;

ngOnInit() {
    this.observable$ = this._store.select(selectStr);
}

2. 模板中使用Async Pipe：

<p>{{ observable$ | async }}</p>

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