Typescript在Redux类型中返回错误

快速的问题，我正在用typescript和redux写一个React-native应用程序。 尝试连接（）时遇到错误，似乎无法找到错误的解决方案。 我假设我做错了，但看了几个小时后却找不到原因。

错误：

Argument of type '(state: AppStateType) => { user: AppStateType; }' is not assignable to parameter of type 'MapStateToPropsParam<IMapStateToProps, void, {}>'.
  Type '(state: AppStateType) => { user: AppStateType; }' is not assignable to type 'MapStateToProps<IMapStateToProps, void, {}>'.
    Types of parameters 'state' and 'state' are incompatible.
      Type '{}' is not assignable to type 'AppStateType'.
        Property 'username' is missing in type '{}'.

尝试连接时（mapStateToProps）：

export default connect<IMapStateToProps, Object, void>(*mapStateToProps*, mapDispatchToProps)(HomeScreen);

我的减速器：

import * as Immutable from 'seamless-immutable';
// our defined @types
import { AppStateType, ActionType } from '../../@types';

const appState: AppStateType = {
    username: '',
    password: '',
    serviceCode: 0,
    fetching: false
};

// enforce that state is immutable
export const initialState = Immutable.from(appState);

const userReducer = (state = initialState, action: ActionType)  => {
    switch (action.type) {
        case 'FETCH_USER':
            state = {
                ...state,
                fetching: false
            };
        break;
        case 'SET_USER':
            state = {
                ...state,
                fetching: false
            };
        break;
        default:
        break;
    }
    return state;
};

export default userReducer;

@types文件：

// app state type
export type AppStateType = {
    username: '';
    password: '';
    serviceCode: 0;
    fetching: false;
};

export interface InterfaceSetUser {
    type: 'SET_USER';
    payload?: {};
}

export interface InterfaceFetchUser {
    type: 'FETCH_USER';
    payload?: {};
}

export type ActionType = InterfaceSetUser | InterfaceFetchUser;

操作：

import { Dispatch } from 'react-redux';

export function SetUser(user: Object) {
    return function(dispatch: Dispatch<{}>) {
        dispatch({
            type: 'SET_USER',
            payload: user
        });
    };
}

零件：

import * as React from 'react';
import { View, Text } from 'react-native';
import { AppStateType, ActionType } from '../@types';
import { Dispatch, connect } from 'react-redux';
import { SetUser } from './../redux/actions/user.actions';
import { bindActionCreators } from 'redux';

interface IMapStateToProps {
    username: '';
    password: '';
    serviceCode: 0;
    fetching: false;
}

const mapStateToProps = (state: AppStateType) => ({
    user: state
});

const mapDispatchToProps = (dispatch: any) => {
    return bindActionCreators({
        setUser: SetUser
    }, dispatch);
};


class HomeScreen extends React.Component {
    render() {
        return(
            <View>
                <Text>
                    Home Screen
                </Text>
            </View>
        );
    }
}

export default connect<IMapStateToProps, Object, void>(mapStateToProps, mapDispatchToProps)(HomeScreen);

我对Typescript和Redux来说是比较新的，因此无法将我的头围绕在这个问题上。 你能指出我在这里的正确方向吗？

---

你的mapStateToProps()应该返回一个IMapStateToProps类型， IMapStateToProps就是期待一个带有属性username ， password ， serviceCode和fetching 。 但是，您只是使用一个属性user从mapStateToProps()返回一个对象。

这就回答了你问的问题，但是你的代码有很多问题，我不确定你是否知道。 例如， AppStateType和IMapStateToProps具有我期望的奇怪定义：

export type AppStateType = {
    username: string;
    password: string;
    serviceCode: number;
    fetching: boolean;
};

HomeScreen应该扩展类似React.Component<IMapStateToProps & { setUser: () => void}>或者setUser的定义。

mapDispatchToProps的类型是connect() Object 。 这是不准确的，因为它实际上是一个带有setUser函数的对象。

链接地址: http://www.djcxy.com/p/52171.html

上一篇: Typescript returns errors in Redux types

下一篇: Typescript error on rendered component when using react