如何在函数中使用接口代替任何类型的参数答案

【问题标题】：How do I use an interface in place of an any type param in a function如何在函数中使用接口代替任何类型的参数
【发布时间】：2017-08-28 07:03:03
【问题描述】：

在 typescript、react 和 redux 中，mapStateToProps 函数 connect 方法的 state 参数声明为 any。

interface MapStateToProps<TStateProps, TOwnProps> {
    (state: any, ownProps: TOwnProps): TStateProps;
}

我想使用我在代码中定义的类型来代替状态参数的任何类型。我怎样才能做到这一点？

const mapStateToProps = (state: MyStateInterface) => {};

但这不起作用，因为它与签名不匹配。

只有我这样说才有效：

const mapStateToProps = (state: any) => {};

但后来我失去了我的 IDE 自动完成功能并在我的函数中进行类型检查。

事实上，这更像是一个打字稿问题，而不是一个 redux 问题。

当一个函数类型有一个带有any参数的参数时，使用时如何指定参数的实际类型？

【问题讨论】：

不应该是const mapStateToProps: MyStateInterface = (state) =>吗？您正在尝试将函数值分配给不正确的状态参数。如果您想将该类型分配给 state 参数，您可以定义一个具有减速器返回值的状态接口
其实我需要输入函数的state参数。 MyStateInterface 是一个在应用程序中描述我的商店的接口（它可以命名为StoreInterface，我在这里这样命名它以匹配 redux 接口声明）
不太清楚你的意思？如果您有一个combineReducers 的索引，您可以为该组合减速器定义一个类型/接口，这就是状态值。让我写一个答案来帮助解释

标签： reactjs typescript redux react-redux

【解决方案1】：

如果你有一些 reducer 做一些事情，然后你将它们组合成一些特定的输出，像这样

export default combineReducers({
    user: userReducer,
    something: someReducer
});

userReducer 在哪里

interface UserReducerState {
    authenticated: boolean;
    loading: boolean;
    username: string;
    email: string;
}
const defaultState = {
    authenticated: false,
    loading: false,
    username: '',
    email: ''
};

export default (state: UserReducerState = defaultState, action: MyActionTypeInterface) => {
    switch (action.type) {
        case USER_LOADED:
            return {...state, ...action.payload, ...{authenticated: true, loading: false};
        default:
            return state;
    }
};

当您connect 一个组件时，mapStateToProps 函数将收到一个 state 参数，其中包含 reducers 值

interface ConnectStateProps {
    user: UserReducerState;
    something: SomethingReducerState
}
const mapStateToProps = (state: ConnectStateProps) => {
    console.log(state);
    ...etc

console.log 的输出如下所示

{
    user: {
        authenticated: false,
        loading: false,
        username: '',
        email: ''
    },
    something: ...etc
}

【讨论】：

是的，完全正确；我的问题是当我将ConnectStateProps 写为mapStateToProps 函数的state 参数的类型（如您的示例中）时，打字稿告诉我它与函数签名不匹配并期望参数类型为@987654331 @;就像你的例子const mapStateToProps = (state: any)
@Bouni 你可以为此创建一个 jsfiddle 吗？我现在使用这个确切的东西。对于当前信息，我无能为力
我发现了我的错误，正如你所说的那样，返回类型与参数的类型不匹配。我误读了打字稿编译器错误消息