Ngrx: 属性 '[Symbol.observable]' 在类型 'Store<boolean>' 错误中缺失

Question

我在 Angular v5 应用程序中使用 NGRX v4.1.1（使用 "strictNullChecks": true，尽管它似乎并不重要）。

我发现商店出现错误。鉴于以下内容：

showLists: Observable<boolean>;

constructor(private store: Store<State>) {}

ngOnInit() {
  this.showLists = this.store.select('contactsFeature', 'contactsReducer', 'showListsPanel');
}

Typescript 在 this.store.select():

上引发错误

Type 'Store<boolean>' cannot be converted to type 'Observable<boolean>'.
Property '[Symbol.observable]' is missing in type 'Store<boolean>'.

这种选择商店的一部分（使用 .select）并将其分配给类型 Observable<> 的变量的方法是 officially outlined in the documentation（我实际上看到他们已经更新了建议使用 ngrx v5 的文档 API，但 v5 尚未发布，因此我已链接到文档的下一个最新版本。

问题是 store.select() 的 return 类型 Store<> 与 Observable<> 不兼容。

然而，这是 'official' 与商店交互的方法（我认为）。所以我想知道出了什么问题。如果我禁用strictNullChecks，我仍然运行进入错误。这个错误在我离开一个月后回来的一个项目中突然出现，我无法确定它到底是什么时候开始的（或者为什么，很明显）。

如有任何建议，我们将不胜感激:)

PS：打字稿不会让我将 .select() 的 return 转换为可观察对象。

更新

更新 npm 为我提供了更好的错误消息。看起来要么是 rxjs 的界面更新了，要么是 ngrx 的界面更新了。

ERROR in apps/coordination/src/app/contacts/contacts-tools.component.ts(21,5): error TS2322: Type 'Store<boolean>' is not assignable to type 'Observable<boolean>'.
  Types of property 'subscribe' are incompatible.
    Type '{ (observer?: NextObserver<boolean> | ErrorObserver<boolean> | CompletionObserver<boolean> | unde...' is not assignable to type '{ (observer: Observer<boolean>): Subscription; (onNext: (value: boolean) => void, onError?: ((err...'.
      Types of parameters 'observer' and 'observer' are incompatible.
        Type 'Observer<boolean>' is not assignable to type 'NextObserver<boolean> | ErrorObserver<boolean> | CompletionObserver<boolean> | undefined'.
          Type 'Observer<boolean>' is not assignable to type 'CompletionObserver<boolean>'.
            Types of property 'complete' are incompatible.
              Type '(() => void) | undefined' is not assignable to type '() => void'.
                Type 'undefined' is not assignable to type '() => void'.

Answer 1

我不确定你的 reducer 长什么样，但我认为：

contactsFeature -> reducer contactsReducer -> 是 contactsFeature 中的属性 showListsPanel -> 是 contactsReducer 对象中的属性

您可以使用 .select('reducer', 'atribute', 'sub'... ) 而不是采摘 ( .pluck )。

对于其他问题，您可以将 select 转换为：

this.showLists = this.store.select('contactsFeature', 'contactsReducer', 'showListsPanel') as Observable<boolean>;

Answer 2

我正在使用 vscode 自动导入模块。也就是说，如果我使用 npm 模块中的 class，vscode 会自动将正确的 import 语句添加到文件顶部。

显然我的一个 npm 模块（不是 rxjs）定义了它自己的 Observable，并且 vscode 已经自动导入了那个，非 rxjs 可观察的。这个非 rxjs observable 导致了类型问题。

Ngrx: 属性 '[Symbol.observable]' 在类型 'Store<boolean>' 错误中缺失

Ngrx: Property '[Symbol.observable]' is missing in type 'Store<boolean>' error

typescript

ngrx

strictnullchecks

更新