Definitelytyped: react-router :`withRouter`가 3.6.2부터`ComponentType`으로 실패합니다.

에 만든 2019년 09월 10일 · 10코멘트 · 출처: DefinitelyTyped/DefinitelyTyped

이것은 3.5.2에서 작동했지만 3.6.2에서는 실패합니다.

strict 모드가 비활성화되었습니다.

타이핑이나 TypeScript의 버그입니까?

여기에 실패한 테스트를 추가했습니다 : 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);

문제를 해결하는 방법을 알고 있다면 대신 풀 요청을하십시오.

[x] @types/xxxx 패키지를 사용해 보았는데 문제가있었습니다.
[x] 최신 안정 버전의 tsc를 사용해 보았습니다. https://www.npmjs.com/package/typescript
[x] StackOverflow에 부적절한 질문이 있습니다. (그곳에서 적절한 질문을하십시오).
[x] [Mention] (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 @ @grmiade @DaIgeb @egorshulga @rraina @ pret-a-porter @ t49tran @ 8enSmith @wezleytsai @ eps1lon

저자를 언급하지 않으면 문제가 무시됩니다.

Bug

출처

OliverJAsh

👍3 ❤1

가장 유용한 댓글

이 수정 후에도 여전히 문제가 발생합니다. 오류 메시지는 다음과 같습니다.

 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

bkoltai 에 2019년 09월 18일

👍11

모든 10 댓글

나는 이것을 파헤칠 시간이 없을 것입니다. ComponentType 사용을 제거하고 ref 및 children 과 관련하여 명시 적 props와 함께 일반 함수를 사용해야한다고 생각합니다. ComponentType 는 노조로 인해 항상 약간 문제가있었습니다. 오류를 생성하지 않으면 다른 hoc와 매우 큰 결합을 생성했습니다. 도서관 소비자는 어차피 정적을 만져서는 안되므로 이러한 정보를 잃어 버리는 것은 문제가되지 않습니다.

eps1lon 에 2019년 09월 10일

같은 문제가 있습니다. react-router repo (https://github.com/ReactTraining/react-router/issues/6906)에 이미보고되었지만 여기로 리디렉션되었습니다.

basslagter 에 2019년 09월 12일

이 수정 후에도 여전히 문제가 발생합니다. 오류 메시지는 다음과 같습니다.

 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

bkoltai 에 2019년 09월 18일

👍11

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

artola 에 2019년 09월 18일

👍2

저는 모두가 새로운 문제를 열도록 권장합니다. 특정 문제를 해결하는 경우 비공개 스레드에서만 댓글을 달면 알림을받을 수 없습니다. 이제 typescript 플레이 그라운드에서 ts 버전 + 구성을 구성 할 수 있으며 유형 정의를 다운로드 할 수 있습니다. 새로운 이슈에 링크를 포함하면 관리자에게 많은 도움이됩니다. 감사합니다 :

이것은 strictFunctionTypes 로만 던지는 것처럼 보이며 마음에 해결책이 있습니다. 우리는 그것이 잘되는지 볼 것입니다.

eps1lon 에 2019년 09월 18일

👍1

@sandersn 수정 사항 을 되 돌린 후 다시 열 수 있습니까?

OliverJAsh 에 2019년 09월 18일

IIRC, @ eps1lon 은 이것이 TypeScript 버그 때문 https://github.com/microsoft/TypeScript/issues/33490

수정 사항 : https://github.com/microsoft/TypeScript/pull/34607.

OliverJAsh 에 2019년 10월 21일

👍2

야간 버전에서 잘 작동합니다. 놀이터 링크