javascript - 制作高阶组件以与 TypeScript 互操作 react-relay 和 react-router

Question

好吧，我的弗兰肯斯坦怪兽已经失控了，我只剩下这么多头发可以拔了，所以非常感谢您的帮助。

我正在尝试使用 React、React-Router、React-Relay 和 Typescript 进行非常基本的应用设置。实际上，我的所有功能都正常运行，但这样做会抛出一些我想更正的讨厌的 Typescript 错误。

因此，基本的 react-router + react-relay 设置模仿了官方的 react-relay 方法:https://medium.com/@cpojer/relay-and-routing-36b5439bad9

不幸的是，当将其翻译成 TypeScript 并通过输入将导入的类型定义用于 react-relay 时(而且，我非常不必修改导入的类型定义)； Route 定义了 props 和 TypeScript 对象以将 home 和 queries prop 传递给 Route 组件。

抱歉只是将我的代码转储在这里，但您需要它才能完全理解这个问题。

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 的 react-router 接口(interface)没有 name 或 queries 所以 TypeScript 会抛出错误。

我确信有几种不同的方法可以解决这个问题，但我不知道在这种情况下什么是最佳实践。

(一些基本的版本信息可能会有帮助:TypeScript 1.8.10、React 15、React-Router 2.4、React-Relay 0.8)

Answer 1

好的，这里最简单的答案是通过命名空间合并添加到导入的 react-router 定义中(我不知道 Typescript 允许您这样做)。

有兴趣的人，只需添加一个overrides.d.ts(或任何你想命名的)并添加到RouteProps接口(interface):

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

老实说，可能有更聪明的方法来处理这整件事，但这是最简单的方法，而且行之有效。

叹息，我生命中的几个小时...