Definitelytyped: react-router:从3.6.2开始,withRouter失败,组件类型(ComponentType)

创建于 2019-09-10  ·  10评论  ·  资料来源: DefinitelyTyped/DefinitelyTyped

这在3.5.2中有效,但在3.6.2中失败。

strict模式已禁用。

这是键入或TypeScript中的错误吗?

我在此处添加了失败的测试: https :

import * as React from 'react';

// Copied from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/5db94ca7fd3570dc23588b404d7bb669a7886a8a/types/react-router/index.d.ts#L146
declare function withRouter<P, C extends React.ComponentType<P>>(
    component: C & React.ComponentType<P>,
): unknown;

declare const Component: React.ComponentType<{}>;
/*
Argument of type 'ComponentType<{}>' is not assignable to parameter of type 'ComponentClass<{}, any> | (ComponentClass<{}, any> & FunctionComponent<{}>)'.
  Type 'FunctionComponent<{}>' is not assignable to type 'ComponentClass<{}, any> | (ComponentClass<{}, any> & FunctionComponent<{}>)'.
    Type 'FunctionComponent<{}>' is not assignable to type 'ComponentClass<{}, any> & FunctionComponent<{}>'.
      Type 'FunctionComponent<{}>' is not assignable to type 'ComponentClass<{}, any>'.
        Type 'FunctionComponent<{}>' provides no match for the signature 'new (props: {}, context?: any): Component<{}, any, any>'.
*/
withRouter(Component);

如果您知道如何解决问题,请提出拉取请求。

  • [x]我尝试使用@types/xxxx软件包,但遇到了问题。
  • [x]我尝试使用最新的稳定版tsc。 https://www.npmjs.com/package/typescript
  • [x]我有一个不适合StackOverflow的问题。 (请在那里问任何适当的问题)。
  • [x] [提及](https://github.com/blog/821-mention-somebody-they-re-notified)作者(请参阅Definitions by:中的index.d.ts ),以便他们可以响应。

    • 作者:@ sergey-buturlakin @ mrk21 @ vasek17 @ngbrown @awendland @KostyaEsmukov @johnnyreilly @LKay @DovydasNavickas @ huy-nguyen @grmiade @DaIgeb @egorshulga @rraina @ pret-a-porter @ tsterwe @ @leyHonster @ 8ster @ 8enSley @ 8lons @ 8enSmith

如果您不提及作者,则将忽略该问题。

最有用的评论

即使完成此修复程序,我仍然看到问题。 错误消息是这样的

 Argument of type '({ myProp, history }: RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }) => Element' is not assignable to parameter of type 'ComponentType<RouteComponentProps<{}, StaticContext, any>>'.
  Type '({ myProp, history }: RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }) => Element' is not assignable to type 'FunctionComponent<RouteComponentProps<{}, StaticContext, any>>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type 'PropsWithChildren<RouteComponentProps<{}, StaticContext, any>>' is not assignable to type 'RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }'.
        Property 'myProp' is missing in type 'RouteComponentProps<{}, StaticContext, any> & { children?: ReactNode; }' but required in type '{ myProp: boolean; }'.

组件定义为

import { RouteComponentProps, withRouter } from "react-router-dom";

interface Props extends RouteComponentProps {
  myProp: boolean;
}

const Component = ({ myProp, match }: Props) => null

export default withRouter(Component);

我正在使用

typescript: 3.6.3
@types/react-router: 5.0.4

所有10条评论

我没有时间去研究这个。 我认为我们应该删除ComponentType所有用法,并对refchildren使用带有显式道具的普通函数。 由于工会, ComponentType总是有点问题。 如果不产生错误,则会与其他hoc产生非常大的并集。 图书馆的用户无论如何也不应接触静态变量,因此,松开这些变量不应该成为问题。

有同样的问题。 已经在react-router回购(https://github.com/ReactTraining/react-router/issues/6906)上进行了报道,但已重定向到此处。

即使完成此修复程序,我仍然看到问题。 错误消息是这样的

 Argument of type '({ myProp, history }: RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }) => Element' is not assignable to parameter of type 'ComponentType<RouteComponentProps<{}, StaticContext, any>>'.
  Type '({ myProp, history }: RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }) => Element' is not assignable to type 'FunctionComponent<RouteComponentProps<{}, StaticContext, any>>'.
    Types of parameters '__0' and 'props' are incompatible.
      Type 'PropsWithChildren<RouteComponentProps<{}, StaticContext, any>>' is not assignable to type 'RouteComponentProps<{}, StaticContext, any> & { myProp: boolean; }'.
        Property 'myProp' is missing in type 'RouteComponentProps<{}, StaticContext, any> & { children?: ReactNode; }' but required in type '{ myProp: boolean; }'.

组件定义为

import { RouteComponentProps, withRouter } from "react-router-dom";

interface Props extends RouteComponentProps {
  myProp: boolean;
}

const Component = ({ myProp, match }: Props) => null

export default withRouter(Component);

我正在使用

typescript: 3.6.3
@types/react-router: 5.0.4

@ karol-majewski我在TS 3.6.3上,最新版本@types/react-router: 5.0.4坏了,而返回前一个版本就可以了。

export function withRouter<P extends RouteComponentProps<any>, C extends React.ComponentType<P>>(
  component: C & React.ComponentType<P>,
): React.ComponentClass<Omit<P, keyof RouteComponentProps<any>> & WithRouterProps<C>> & WithRouterStatics<C>;

我鼓励大家打开新的话题。 如果我们解决了您的特定问题,仅在封闭的线程中发表评论,您将不会收到通知。 现在,打字稿游乐场可以配置ts版本+ config,并且可以下载类型定义。 在新期刊中包含一个链接对维护者有很大帮助。 谢谢:祈祷:

似乎只有strictFunctionTypes会抛出该错误,并且我有一个解决方案。 我们将看看是否可行。

@sandersn恢复修复以来,我们可以重新打开它吗?

IIRC, @ eps1lon发现这是由于TypeScript错误引起的: https :

修复程序将出现在: https :

夜间版本可以正常使用。 游乐场链接

打字稿是在浪费时间,我花了很多时间来尝试解决这个愚蠢的错误和问题,因此,如果使打字稿简化生活,那肯定是不做工作,充满了错误和错误

此问题已在TS 3.7中修复。 闭幕。

此页面是否有帮助?
0 / 5 - 0 等级