Definitelytyped: react-router:3.6.2以降の `ComponentType`で` withRouter`が失敗する

作成日 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)作成者( index.d.ts Definitions by:index.d.ts )応答します。

    • 著者:@セルゲイ・buturlakin @ mrk21 @ vasek17 @ngbrown @awendland @KostyaEsmukov @johnnyreilly @LKay @DovydasNavickas @フイ・グエン@grmiade @DaIgeb @egorshulga @rraina @プレタポルテ@ t49tran @ 8enSmith @wezleytsai @ eps1lon @HipsterBrown

著者に言及しない場合、問題は無視されます。

Bug

最も参考になるコメント

この修正後も問題が発生します。 エラーメッセージは次のようなものです

 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私はTS3.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>;

私は皆に新しい問題を開くことを勧めます。 特定の問題を修正した場合、クローズドスレッドでコメントするだけでは通知を受ける方法はありません。 typescriptプレイグラウンドで、tsバージョン+構成を構成できるようになり、タイプ定義をダウンロードできるようになりました。 新しい号にリンクを含めると、メンテナは大いに役立ちます。 ありがとう:祈る:

これはstrictFunctionTypesのみスローされるようで、私は解決策を考えています。 それがうまくいくかどうかを確認します。

@sandersn修正元に戻されたので、これを再度開くことはできますか?

IIRC、 @ eps1lonは、これがTypeScriptのバグによるものであることを発見しました: https

修正はhttps://github.com/microsoft/TypeScript/pull/34607で行われます。

ナイトリーバージョンで正常に動作します。 遊び場リンク

typescriptは時間の無駄です、私はこのばかげたエラーとnothinsを解決するために何時間も費やしました、それでtypescriptが人生を楽にするために作られたなら、それは間違いなく仕事をしていません、エラーとバグでいっぱいです

この問題はTS3.7で修正されました。 閉鎖。

このページは役に立ちましたか?
0 / 5 - 0 評価