Definitelytyped: react-router: `withRouter` falha com` ComponentType` começando em 3.6.2

Criado em 10 set. 2019 · 10Comentários · Fonte: DefinitelyTyped/DefinitelyTyped

Isso funcionou em 3.5.2, mas falha em 3.6.2.

strict está desativado.

Isso é um bug na digitação ou TypeScript?

Adicionei testes de falha para isso aqui: https://github.com/DefinitelyTyped/DefinitelyTyped/commit/f036856dfc9a7fd140f378402c102206738ec0a4.

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);

Se você souber como corrigir o problema, faça uma solicitação pull.

[x] Tentei usar o pacote @types/xxxx e tive problemas.
[x] Tentei usar a versão estável mais recente do tsc. https://www.npmjs.com/package/typescript
[x] Eu tenho uma pergunta que é inadequada para StackOverflow . (Por favor, faça todas as perguntas apropriadas lá).
[x] [Mencione] (https://github.com/blog/821-mention-somebody-they-re-notified) os autores (veja Definitions by: em index.d.ts ) para que eles possam responder.
- Autores: @ sergey-buturlakin @ mrk21 @ vask17 @ngbrown @awendland @KostyaEsmukov @johnnyreilly @LKay @DovydasNavickas @ huy-nguyen @grmiade @DaIgeb @egorshulga @rraeza @ epsterwipsley @ tlonHulga @ tlonHlvt @ rraez @ epsterw

Se você não mencionar os autores, o problema será ignorado.

Bug

Fonte

OliverJAsh

👍3 ❤1

Comentários muito úteis

Ainda estou tendo problemas mesmo depois dessa correção. Mensagem de erro é algo como

 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; }'.

com o componente definido como

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

interface Props extends RouteComponentProps {
  myProp: boolean;
}

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

export default withRouter(Component);

estou a usar

typescript: 3.6.3
@types/react-router: 5.0.4

bkoltai em 18 set. 2019

👍11

Todos 10 comentários

Não terei tempo para me aprofundar nisso. Acho que devemos apenas remover qualquer uso de ComponentType e usar funções simples com adereços explícitos em relação a ref e children . ComponentType sempre foi um pouco problemático por causa do sindicato. Se não criasse erros, produzia uniões muito grandes com outros hocs. Os consumidores de bibliotecas não devem tocar na estática, então perdê-la não deve ser um problema.

eps1lon em 10 set. 2019

Tenho o mesmo problema. Já relatado sobre o repositório react-router (https://github.com/ReactTraining/react-router/issues/6906), mas foi redirecionado para aqui.

basslagter em 12 set. 2019

Ainda estou tendo problemas mesmo depois dessa correção. Mensagem de erro é algo como

 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; }'.

com o componente definido como

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

interface Props extends RouteComponentProps {
  myProp: boolean;
}

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

export default withRouter(Component);

estou a usar

typescript: 3.6.3
@types/react-router: 5.0.4

bkoltai em 18 set. 2019

👍11

@ karol-majewski Estou no TS 3.6.3 e a última versão @types/react-router: 5.0.4 está quebrando, mas voltar para a anterior está OK.

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>;

artola em 18 set. 2019

👍2

Eu encorajo a todos a abrir novas questões. Se corrigirmos seu problema específico, você não terá como ser notificado se apenas comentar em um tópico fechado. O playground de scripts agora permite configurar a versão ts + config e pode baixar definições de tipo. Incluir um link em um novo problema ajuda muito os mantenedores. Obrigado: ore:

Parece que isso só funciona com strictFunctionTypes e eu tenho uma solução em mente. Vamos ver se dá certo.

eps1lon em 18 set. 2019

👍1

@sandersn Podemos reabrir isto já que a correção foi revertida ?

OliverJAsh em 18 set. 2019

IIRC, @ eps1lon descobriu que isso se deve a um bug do TypeScript: https://github.com/microsoft/TypeScript/issues/33490

A correção virá em: https://github.com/microsoft/TypeScript/pull/34607.

OliverJAsh em 21 out. 2019

👍2

Funciona bem com a versão noturna. Link Playground

karol-majewski em 31 out. 2019

datilografar é uma perda de tempo, passei horas tentando resolver esse erro estúpido e nada, então se a datilografia foi feita para tornar a vida mais fácil, definitivamente não está fazendo o trabalho, cheia de erros e bugs