1

好的，我的科学怪人怪物已经失控了，我只剩下这么多头发要拔了，所以这里的任何帮助都非常感谢。

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

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

不幸的是，当将其翻译成 TypeScript 并通过类型化使用导入的类型定义进行反应中继时（而且，我几乎不必修改导入的类型定义）；Route已定义 props 和 TypeScript 对象以将 ahome和queriesprop 传递给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'));
;

正如我所说，这实际上按预期运行，但问题是 react-router 接口Route没有name，queries因此 TypeScript 会引发错误。

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

（一些基本的版本信息可能会有所帮助：TypeScript 1.8.10、React 15、React-Router 2.4、React-Relay 0.8）

4

1 回答 1

2

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

对于那些感兴趣的人，只需添加一个overrides.d.ts（或您想要命名的任何名称）并添加到RouteProps界面中：

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

老实说，可能有一种更聪明的方法来处理整个事情，但这是最简单的，而且很有效。

叹了口气，我生命中的几个小时过去了……

于 2016-05-10T01:31:37.937 回答