Question

好吧，我的弗兰肯斯坦怪物已经失去控制，我只剩下那么多头发可以拉出来，所以对此有任何帮助都很感激。

我尝试使用React，React-Router，React-Relay和Typescript进行非常基本的应用设置。我实际上已经完成了所有功能，但它在抛出一些我想要纠正的令人讨厌的Typescript错误时这样做了。

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

不幸的是，当将其转换为TypeScript并使用导入的类型定义通过typings进行react-relay时（并且，我会非常，不必修改导入的类型定义）; Route已将props和TypeScript对象定义为将home和queries道具传递给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接口没有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界面：

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

老实说，可能有一个更聪明的方法可以解决这个问题，但这是最简单的并且有效。

叹了口气，我的生活已经过了几个小时......

制作更高阶的组件以使用TypeScript

1 个答案: