Angular2 @ngrx 存储正常，但可观察类型让我感到困惑

Question

试图使这个 Angular + ngrx store boiler 个人项目样板工作但出现输入错误。错误消息非常简单，但我无法在不更改可观察对象类型的情况下解决它。首先，当运行 npm start

出现错误

app/app.component.ts(29,9): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<number[]>'.
  Type '{}' is not assignable to type 'number[]'.
    Property 'length' is missing in type '{}'.

第 29 行在构造函数中并且是：

constructor(    
    private store: Store<AppState>
){
    this.counter$ = store.select('counter');  // Line 29
}

在代码中，如果我更改以下可观察类型：

counter$: Observable<number>;

收件人：

counter$: Observable<any>;

npm start 在那里运行起来就像一个魅力，但我想知道为什么，因为我试图在 Obserbable

上强制使用数字类型

编辑：添加减速器代码：

import { ActionReducer, Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';

export const counterReducer: ActionReducer<number> = (state: number = 0, action: Action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;
        default:
            return state;
    }
}

Answer 1

如果没有看到你的更多代码，很难确切地知道发生了什么，但你的 store.select('counter') 似乎是 return 一个对象的可观察对象，你在其中键入 counter$ 作为数字的可观察值。当你使用 store.select('reducerName') 时，store 会 return 给你一个从你的 reducer 函数中 returned 的最后一个值的可观察值。如果您将状态初始化为一个空对象，例如

export const counter = (state = {}, action) => {

这可能会导致您看到的错误，您可以尝试将您的状态初始化为您的 observable 期望的类型。

Answer 2

对此的快速解决方法是将泛型添加到商店中的 select 又名地图运算符

this.counter$ = store.select<number>('counter');  // Line 29

我认为发生的事情是，当您以您的方式执行 select 时，TypeScript 无法推断类型。

另一种可以推断类型的方法是 select 或者像这样。

this.counter$ = store.select(state$ => state$.counter);  // Line 29

第二个将传入状态对象，您可以从中 select 特定的 reducer。我不是很肯定，但我认为它应该能够以这种方式推断出类型。

Angular2 @ngrx 存储正常，但可观察类型让我感到困惑

Angular2 @ngrx Store ok but observable type confuses me

observable

rxjs

ngrx

angular