时间戳

首页 > 解决方案 > 如何正确使用 react-redux 与 typescript@3 连接？

reactjs - 如何正确使用 react-redux 与 typescript@3 连接？

问题描述

我正在尝试使用 TypeScript 和 react-redux 创建类型安全的 HOC。

hoc/with-is-visible-range.tsx

import React from "react";
import { Subtract } from "utility-types";
import { connect } from "react-redux";
import { rangeVisibilitySelector } from "./date-range.selectors";

interface IInjectedProps {
  visible: boolean;
}

interface IMappedProps {
  isVisible: boolean;
}

const withIsVisibleRange = <T extends IInjectedProps>(
  Component: React.ComponentType<T>
) => {
  const WrappedComponent: React.SFC<
    Subtract<T, IInjectedProps> & IMappedProps
  > = ({ isVisible, ...rest }: IMappedProps) => {
    return <Component {...rest} visible={isVisible} />;
  };

  const mapStateToProps = (state: ApplicationState) => ({
    isVisible: rangeVisibilitySelector(state)
  });

  return connect(
    mapStateToProps,
    null
  )(WrappedComponent);
};

export default withIsVisibleRange;

但我总是得到同样的错误：

错误信息：

错误：(30, 5) TS2345：“StatelessComponent> & IMappedProps>”类型的参数不可分配给“ComponentType> & IMappedProps>>”类型的参数。类型 'StatelessComponent> & IMappedProps>' 不可分配给类型 'StatelessComponent> & IMappedProps>>'。类型 'Pick> & IMappedProps' 不可分配给类型 'Matching<{ isVisible: boolean; } & null, Pick> & IMappedProps>'。类型 '(Pick> & IMappedProps)[P]' 不能分配给类型 'P extends "isVisible" ？({ isVisible: boolean; } & null)[P] 扩展 (Pick> & IMappedProps)[P] ? (Pick> & IMappedProps)[P] : ({ ...; } & null)[P] : (Pick<...> & IMappedProps)[P]'。

标签： reactjstypescriptreduxreact-redux

解决方案

虽然 in 声明中使用的类型操作（等Matching）适用于任何给定的 props 类型，但 TypeScript 编译器无法象征性地推断当它们应用于涉及类型参数的 props 类型时会发生什么。不幸的是，您必须使用类型断言，即.connect@types/react-reduxTWrappedComponent as any

推荐阅读