Reselect: Typescript typings in 3.0 break the ngrx example app

Created on 6 Apr 2017  路  2Comments  路  Source: reduxjs/reselect

code is: https://github.com/ngrx/example-app/blob/master/src/app/reducers/index.ts
Here is the error:
Argument of type '(state: State) => State' is not assignable to parameter of type '[(state: {}, props: {}, ...args: any[]) => {}, (state: {}, props: {}, ...args: any[]) => {}, (sta...'. Property '0' is missing in type '(state: State) => State'.) /Users/fridder/code/ngrx-example/src/app/reducers/index.ts (134,48): Argument of type 'OutputSelector<State, { [id: string]: Book; }, (res: State) => { [id: string]: Book; }>' is not assignable to parameter of type '(state: {}, props: {}, ...args: any[]) => {}'. Type 'OutputSelector<State, { [id: string]: Book; }, (res: State) => { [id: string]: Book; }>' provides no match for the signature '(state: {}, props: {}, ...args: any[]): {}') /Users/fridder/code/ngrx-example/src/app/reducers/index.ts (146,49): Argument of type 'OutputSelector<State, { [id: string]: Book; }, (res: State) => { [id: string]: Book; }>' is not assignable to parameter of type '(state: {}, props: {}, ...args: any[]) => {}'. Type 'OutputSelector<State, { [id: string]: Book; }, (res: State) => { [id: string]: Book; }>' provides no match for the signature '(state: {}, props: {}, ...args: any[]): {}') /Users/fridder/code/ngrx-example/src/app/reducers/index.ts (150,58): Argument of type 'OutputSelector<State, string[], (res: State) => string[]>' is not assignable to parameter of type '(state: {}, props: {}, ...args: any[]) => {}'. Type 'OutputSelector<State, string[], (res: State) => string[]>' provides no match for the signature '(state: {}, props: {}, ...args: any[]): {}')

Most helpful comment

It seems that TypeScript goes crazy when you try to pass selector as the last argument to createSelector. For some reason, it can't match OutputSelector interface with function type like (res: R) => T.

OutputSelector interface looks like this:

export interface Selector<S, R> {
  (state: S): R;
}
export interface OutputSelector<S, R, C> extends Selector<S, R> {
  resultFunc: C;
  recomputations: () => number;
  resetRecomputations: () => number;
}

The problem goes away if we change these types as follows:

export type Selector<S, R> = (state: S) => R;

export type OutputSelector<S, R, C> = Selector<S, R> & {
  resultFunc: C;
  recomputations: () => number;
  resetRecomputations: () => number;
}

I'll update this PR: https://github.com/reactjs/reselect/pull/240 to address this.

All 2 comments

It seems that TypeScript goes crazy when you try to pass selector as the last argument to createSelector. For some reason, it can't match OutputSelector interface with function type like (res: R) => T.

OutputSelector interface looks like this:

export interface Selector<S, R> {
  (state: S): R;
}
export interface OutputSelector<S, R, C> extends Selector<S, R> {
  resultFunc: C;
  recomputations: () => number;
  resetRecomputations: () => number;
}

The problem goes away if we change these types as follows:

export type Selector<S, R> = (state: S) => R;

export type OutputSelector<S, R, C> = Selector<S, R> & {
  resultFunc: C;
  recomputations: () => number;
  resetRecomputations: () => number;
}

I'll update this PR: https://github.com/reactjs/reselect/pull/240 to address this.

Looks like this was addressed in #240

Was this page helpful?
0 / 5 - 0 ratings