Question

尝试使这个Angular + ngrx store boiler个人项目样板工作，但得到一个打字错误。错误信息很简单，但我不能在不改变observable类型的情况下解决它。首先，运行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上强制使用数字类型

编辑：添加reducer代码：

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')正在返回一个对象的可观察对象，你可以在其中键入counter$作为一个可观察对象数。当您使用store.select('reducerName')时，store将返回一个可从您的reducer函数返回的最后一个值的observable。如果要将状态初始化为空对象，例如

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

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

Answer 2

对此的快速解决方法是将通用添加到商店中的select aka map运算符，如此

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

我认为发生的事情是，当你以你的方式进行选择时，TypeScript无法推断出类型。

这样做的另一种方法是它可以推断类型就是这样做选择器。

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

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

Angular2 @ngrx存储确定但可观察类型让我困惑

2 个答案: