Higher Orderコンポーネントを作ってType-Scriptとの反応リレーと反応ルータを相互運用する

Question

私のFrankensteinのモンスターはコントロールできなくなってしまったので、髪が抜けてしまったので、ここで助けてください。

私は、React、React-Router、React-Relay、およびTypescriptで動作する非常に基本的なアプリケーション設定を取得しようとしています。私は実際にすべての機能を持っていますが、修正したい不快なTypescriptエラーを投げながらそうしています。

だから、基本的に反応-ルータ+反応するリレー設定模倣は公式反応し、リレーのアプローチは、ここで見つける：残念ながらhttps://medium.com/@cpojer/relay-and-routing-36b5439bad9

、活字体にこれを翻訳すると反応し、リレーを介してのために輸入型定義を使用して（そして、私は非常に多くのインポートされた型定義を変更する必要はありません）。 Routeは、Routeコンポーネントにhomeとqueriesの小道具を渡すようにpropsとTypeScriptオブジェクトを定義しました。

私のコードをここにダンプするだけの謝罪はありますが、問題を十分に理解するためにはそれが必要です。

import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 
import * as Relay from 'react-relay'; 
import MainApp from './components/MainApp'; 

const createRelayContainer: any = function createRelayContainer (Component: new() => React.Component<any, any>, props: any): JSX.Element { 
    if (Relay.isContainer(Component)) { 
    // construct the RelayQueryConfig from the route and the router props 
    const { name, queries } = props.route; 
    const { params } = props; 

    return (
     <Relay.RootContainer 
     Component={Component} 
     renderFetched={(data: any) : any => <Component {...props} {...data} /> } 
     route={{name, params, queries}} 
     /> 
    ); 
    } 
    return <Component {...props} />; 
}; 

const homeQueries: any = { 
    viewer:(): Relay.QLExpression => Relay.QL` 
    query { 
     viewer 
    }`, 
}; 

ReactDOM.render(
    <Router 
    history={ browserHistory } 
    createElement={createRelayContainer}> 
    <Route> 
     <Route 
     name='home' 
     path='/' 
     component={MainApp} 
     queries={homeQueries} 
     /> 
    </Route> 
    </Router>, 
    document.getElementById('root')); 
; 

私が言ったように、これは実際に期待通りに機能しますが摩擦はRoute反応-ルータをインターフェイスは、活字体がエラーをスローしますのでnameまたはqueriesを持っていないということです。

これを解決するには、いくつかのアプローチがありますが、このシナリオでは何がベストプラクティスになるかわかりません。

（いくつかの基本的なバージョン情報が役に立つかもしれ：活字体1.8.10は、15反応し、反応させ、-ルーター2.4を、反応させ、リレー0.8）

Answer 1

さて、ここでは最も簡単な答えはただ輸入react-に追加することです名前空間のマージを介してルータの定義（私はTypescriptがこれをするのを許していませんでした）。正直なところ

declare namespace ReactRouter { 
    interface RouteProps { 
    name?: string; 
    queries?: any; 
    } 
} 

、これについて行くために、より巧妙な方法があるかもしれません。興味のある方、ちょうどoverrides.d.ts（または何でもあなたはそれに名前を付けたい）を追加し、RoutePropsインターフェースに追加するために

全体が、これは一番簡単なことです、それは動作します。

一息、私の人生の時間があった...