Может ли селектор React возвращать определенный тип? - PullRequest
Новая
       10

Может ли селектор React возвращать определенный тип?

0 голосов
/ 14 мая 2019

Я новичок и в React, и в Typescript, и пытаюсь выяснить, может ли селектор возвращать пользовательский тип.

Это основной селектор, который возвращает пользователя типа Map<string, any>:

селекторы / user.ts 

import { createSelector } from 'reselect';
import { TypedMap } from 'reducers';
import { User } from 'types/api';

const rawSelectUser = (state: TypedMap) => state.get('session');
const selectUser = () =>
    createSelector(
        rawSelectUser,
        substate => substate.get('user')
    );

export default selectUser;

Интересно, смогу ли я заставить его вернуть тип User, который яв другом месте моего приложения:

types / api.ts 

export class User implements Serializable<User> {
    id!: number;
    firstName!: string;
    lastName!: string;
    name!: string;
    email!: string;
    isActive!: boolean;
    role!: UserRole;
    metadata?: any;
}

В конечном счете, я хочу, чтобы мои файлы .tsx использовали мой пользовательвведите от types/api.ts.Но этот код в настоящее время выдает ошибку ниже:

index.tsx 

...

const mapStateToProps = createStructuredSelector<TypedMap, LoginProps, User>({
    user: selectUser()
});

const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>
    bindActionCreators(
        {
            postLogin,
            checkUserPresent
        },
        dispatch
    );

const withConnect = connect(
    mapStateToProps,
    mapDispatchToProps
);

const themedComponent = withTheme(withStyles(styles)(Login));
export default compose(withConnect)(themedComponent);

mapDispatchToProps = (dispatch: Dispatch<AnyAction>) =>

... генерирует эту ошибку: 

index.js:1437 /Users/username/sites/my-ui/src/containers/Login/index.tsx
TypeScript error in /Users/username/sites/my-ui/src/containers/Login/index.tsx(151,5):
Argument of type '{ user: OutputSelector<TypedMap, any, (res: Map<string, any>) => any>; }' is not assignable to parameter of type '{ id: ParametricSelector<TypedMap, LoginProps, number>; firstName: ParametricSelector<TypedMap, LoginProps, string>; lastName: ParametricSelector<TypedMap, LoginProps, string>; ... 6 more ...; fromState: ParametricSelector<...>; }'.
  Object literal may only specify known properties, and 'user' does not exist in type '{ id: ParametricSelector<TypedMap, LoginProps, number>; firstName: ParametricSelector<TypedMap, LoginProps, string>; lastName: ParametricSelector<TypedMap, LoginProps, string>; ... 6 more ...; fromState: ParametricSelector<...>; }'.  TS2345

    149 | // }
    150 | const mapStateToProps = createStructuredSelector<TypedMap, LoginProps, User>({
  > 151 |     user: selectUser()
        |     ^
    152 | });
    153 | 
    154 | const

1 Ответ

1 голос
/ 14 мая 2019 
const getSession = (state: TypedMap) => state.get('session');
const selectUser = createSelector(
  getSession,
  (session): User => session.get('user')
)

Обратите внимание на утверждение типа во втором аргументе для createSelector

и 

createStructuredSelector<TypedMap, LoginProps, { user: User }>
...