未用NgRx实现自定义Store，遇Observable类型匹配错误求助

这个TypeScript错误的核心是：你把Observable实例当成了Observable类/构造函数来使用了。TS提示返回的Observable<Meal[]>实例缺少prototype、create这些属于Observable类本身的静态属性，说明代码里的类型注解或赋值逻辑搞混了实例和类的概念。

排查步骤 #

1. 检查Store的select方法实现 #

确保select方法返回的是合法的Observable实例，而不是类引用。正确的实现应该基于rxjs的Observable或Subject派生类：

// store.ts
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Meal } from './meal.model';

interface AppState {
  meals: Meal[];
}

export class Store {
  private _state$ = new BehaviorSubject<AppState>({ meals: [] });

  // 正确返回Observable<Meal[]>实例
  select<T>(selector: (state: AppState) => T): Observable<T> {
    return this._state$.pipe(map(selector));
  }

  // 可选：更新状态的方法
  updateState(newState: Partial<AppState>) {
    this._state$.next({ ...this._state$.value, ...newState });
  }
}

2. 修正MealsComponent中的错误用法 #

组件里不能把select返回的实例注解成typeof Observable（这代表Observable类的类型），而应该直接用Observable<Meal[]>：

// MealsComponent.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Meal } from './meal.model';
import { Store } from './store';

@Component({
  selector: 'app-meals',
  template: `<div *ngFor="let meal of meals$ | async">{{ meal.name }}</div>`
})
export class MealsComponent {
  // 正确：注解为Observable<Meal[]>实例类型
  meals$: Observable<Meal[]>;

  constructor(private store: Store) {
    this.meals$ = this.store.select(state => state.meals);
  }
}

3. 额外排查点 #

• 检查Observable导入是否正确：必须是import { Observable } from 'rxjs'，不要导入自定义的同名类型或接口。
• 确认没有在代码中错误地将select返回值强制类型转换为typeof Observable，这会把实例强行转换成类类型，触发TS错误。

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