Ngrx类型错误：Observable<void>无法赋值给Observable<IComment[]>

错误原因 #

你遇到的类型不匹配错误，根源在选择器代码的投影函数中没有返回值。每个createSelector的第二个参数（投影函数）里，你只是访问了state.isLoading/state.comments/state.error，但没有返回它们，函数默认返回void，最终导致store.pipe(select(...))返回的是Observable<void>，和你定义的Observable<boolean>/Observable<IComment[]>类型不兼容。

修复方案 #

修改选择器代码，确保每个投影函数返回对应的值，有两种简洁写法：

写法1：显式返回 #

import { createSelector, select } from '@ngrx/store';
import { AppStateInterface } from 'src/app/types/appState.interface';

export const selectFeature = (state: AppStateInterface) => state.comments;

export const isLoadingSelector = createSelector(selectFeature, (state) => {
  return state.isLoading;
});

export const commentsSelector = createSelector(selectFeature, (state) => {
  return state.comments;
});

export const errorSelector = createSelector(selectFeature, (state) => {
  return state.error;
});

写法2：箭头函数简写（更推荐） #

import { createSelector, select } from '@ngrx/store';
import { AppStateInterface } from 'src/app/types/appState.interface';

export const selectFeature = (state: AppStateInterface) => state.comments;

export const isLoadingSelector = createSelector(selectFeature, (state) => state.isLoading);

export const commentsSelector = createSelector(selectFeature, (state) => state.comments);

export const errorSelector = createSelector(selectFeature, (state) => state.error);

验证修改 #

修改后，选择器会正确返回对应类型的值，store.pipe(select(...))生成的Observable类型就会和组件中定义的isLoading$、comments$类型匹配，错误即可消除。

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