能否基于容器组件自动推断Login组件的Props类型？

在TypeScript环境下，我们完全不需要手动定义LoginProps——可以借助TypeScript的内置类型工具，或者Redux提供的专属类型，直接从mapStateToProps和mapDispatchToProps的定义自动推导出组件所需的Props类型。这样既能减少重复代码，还能避免手动维护类型导致的不一致问题。

方法一：用TypeScript内置的ReturnType组合类型 #

这种方式不需要额外依赖，纯用TS自带的类型工具就能实现：

首先保留你的容器逻辑，然后提取两个map函数的返回值类型并组合：

import { Dispatch } from 'redux';
import { connect } from 'react-redux';

export interface State { email: string }
// 假设你的Action类型已定义
type Action = { type: 'SET_EMAIL'; payload: string };

// 原mapState和mapDispatch定义不变
const mapStateToProps = (state: State) => ({ 
  email: state.email, 
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({ 
  onChange: (name: string, value: string) => dispatch({ type: 'SET_EMAIL', payload: value }), 
})

// 自动提取两个map函数返回的props类型
type MapStateProps = ReturnType<typeof mapStateToProps>;
type MapDispatchProps = ReturnType<typeof mapDispatchToProps>;

// 组合成组件的Props类型
type LoginProps = MapStateProps & MapDispatchProps;

// 组件直接使用自动推导的LoginProps
const Login = (props: LoginProps) => ( 
  <p>Render something here</p> 
)

export default connect(mapStateToProps, mapDispatchToProps)(Login);

方法二：用Redux的ConnectedProps类型（更简洁） #

如果你的@types/react-redux版本在v7.1及以上，可以用官方提供的ConnectedProps类型，直接从connect的连接器中提取组件Props：

import { Dispatch } from 'redux';
import { connect, ConnectedProps } from 'react-redux';

export interface State { email: string }
type Action = { type: 'SET_EMAIL'; payload: string };

const mapStateToProps = (state: State) => ({ 
  email: state.email, 
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({ 
  onChange: (name: string, value: string) => dispatch({ type: 'SET_EMAIL', payload: value }), 
})

// 先创建连接器
const connector = connect(mapStateToProps, mapDispatchToProps);
// 自动提取组件所需的Props类型
type LoginProps = ConnectedProps<typeof connector>;

// 组件使用该类型
const Login = (props: LoginProps) => ( 
  <p>Render something here</p> 
)

// 导出连接后的组件
export default connector(Login);

为什么这么做更好？ #

• 减少重复代码：不用手动编写和维护LoginProps，避免重复定义相同的属性
• 类型一致性：只要mapStateToProps或mapDispatchToProps的返回值发生变化，组件的Props类型会自动同步更新，不会出现类型不匹配的问题
• 更直观：组件的Props来源完全由容器逻辑决定，逻辑和类型绑定更紧密

内容的提问来源于stack exchange，提问作者ThomasThiebaud