@ type/react-routerのTypescriptカスタム@typesパッケージ

私のプロジェクトではtypescriptと反応します。反応ルータのブレッドクラムを表示するには、反応ブレッドクラムを使用する必要があります。@ type/react-routerのTypescriptカスタム@typesパッケージ

今、私は私がNPM に@typeパッケージを使用するときにパンくずリストの名前を表示するためにroute.props.nameを使用する必要がありますが、

"dependencies": { 
    "@types/react-breadcrumbs": "^1.3.7", 
    "@types/react-router": "^3.0.8" 
}

が反応し、ブレッドクラムをマイpackage.jsonに2つの@typeのパッケージを追加しますRoute.d.tsファイルはRoutePropsインターフェイスに名前Propsがありません。

interface RouteProps extends IndexRouteProps { 
    path?: RoutePattern; 
} 
interface IndexRouteProps { 
    component?: RouteComponent; 
    components?: RouteComponents; 
    getComponent?: (nextState: RouterState, callback: ComponentCallback) => void; 
    getComponents?: (nextState: RouterState, callback: ComponentsCallback) => void; 
    onEnter?: EnterHook; 
    onChange?: ChangeHook; 
    onLeave?: LeaveHook; 
}

だから私はそれが私がエラーをコンパイルし

エラーTS2339を表示しますIノー編集場合
export interface RouteProps extends IndexRouteProps { 
    path?: RoutePattern; 
    name?: String; 
} 
にnode_modulesでRoute.d.tsファイルを編集指示する必要があります。プロパティ 'name'は型に存在しません 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly < ...'

私は直接編集node_modulesファイルは良い習慣ではないと思います。

他の方法でタイプファイルをカスタム設定できますか？

ありがとうございました。

出典

2017-03-22 Kun Min Syu

あなたは、元の入力を変更する必要はありません。このような

declare module "react-router/lib/Route" { 
    interface RouteProps { 
     name?: String; 
    } 
}

：

import { RouteProps } from "@types/react-router"; 

declare module "react-router/lib/Route" { 
    interface RouteProps { 
     name?: String; 
    } 
} 

let x: RouteProps; 

x.name; // <- no error!

今あなたが作成することができますhttps://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

テストするには、インポート後に元のモジュールを以下のモジュール宣言を追加します。あなたは、「モジュールの増強」を使用していることを行うことができますあなたのプロジェクトにあなたのカスタムタイピング（例えばcustom-typings.d.ts）を入れて、その拡張インターフェースを入れるためのファイル。

出典

2017-03-22 05:16:15 Diullei

ありがとう、私はcustom-route.d.tsファイルを作成し、宣言モジュールコードを入れます。コンパイルの成功です。 –