如何让TypeScript strictFunctionTypes兼容React Router与Redux？

这个问题在TypeScript开启strictFunctionTypes后很常见，核心是Redux connect的类型系统和React Router的组件props要求在严格模式下的兼容性冲突。让我帮你拆解问题并给出几个不依赖any的解决方案：

问题根源 #

当启用strictFunctionTypes后，TypeScript会严格检查函数参数的逆变兼容性。React Router的Route组件的component属性期望接收的组件可以接受RouteComponentProps<any> | undefined作为props，但你的ConnectedComponent（由connect创建）要求props必须是StateProps & DispatchProps & RouteProps这种必填的组合类型——这就导致了两个核心冲突：

1. undefined无法赋值给你的必填props类型
2. React Router期望的宽泛RouteComponentProps<any>类型，无法匹配你更具体的RouteProps类型

你的connect泛型参数使用也有小问题：connect<StateProps, DispatchProps, RouteProps, ArbitraryStateInterface>中第三个参数RouteProps是组件从父组件（Route）接收的原始props，但connect返回的组件会强制要求父组件传递这些props，这和React Router的宽松props要求产生了矛盾。

解决方案1：使用Route的render属性替代component（推荐） #

这是最简单且最优雅的方案，通过render函数显式传递路由props，绕开类型兼容性问题：

<Route 
  path="/some/path/with/:parameter" 
  render={(routeProps) => <ConnectedComponent {...routeProps} />} 
/>

你的BareComponent类型定义不需要修改（依然是React.Component<ReduxProps & RouteProps, ArbitraryState>），render函数会把Route提供的routeProps传递进去，Redux的props由connect自动注入，类型检查会完全通过。

解决方案2：调整connect泛型参数，允许路由props为可选 #

如果你坚持使用component属性，可以修改connect的泛型参数，让组件接受可选的路由props，同时调整组件内部的props处理逻辑：

// 修改BareComponent的props类型，允许路由props为可选
class BareComponent extends React.Component<ReduxProps & Partial<RouteProps>, ArbitraryState> {
  render() {
    // 使用非空断言处理可选参数（确保路由匹配时参数一定存在）
    const parameter = this.props.parameter!;
    return <div>{parameter}</div>;
  }
}

// 调整connect的泛型，指定父组件传递的props为RouteProps | undefined
const ConnectedComponent = connect<StateProps, DispatchProps, RouteProps | undefined, ArbitraryStateInterface>(
  mapStateToProps
)(BareComponent);

这种方法需要你在组件内部处理可选props，适合必须使用component属性的场景。

解决方案3：让TypeScript自动推导connect的泛型参数 #

去掉connect的显式泛型参数，让TypeScript自动推导StateProps、DispatchProps和OwnProps，通常能生成更兼容的类型：

// 先给map函数加上明确的类型定义
const mapStateToProps = (state: ArbitraryStateInterface): StateProps => {
  return { storeProperty: state.someProperty };
};

const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
  return { dispatchCallback: () => dispatch(someAction()) };
};

// 去掉显式泛型，让TypeScript自动推导
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(BareComponent);

这种方法依赖TypeScript的自动推导能力，能避免手动指定泛型时的错误，同时保持类型安全。

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