IT技术 - react-router中，this.context.router的类型是什么？ - 吾爱随笔录

为了设置上下文，我在react-router-tutorial 的第 12 课中学习，但是随着我的学习，我实际上是在 TypeScript 中做所有事情。在本教程的这一点上，在几个 React 组件中，有一个叫做Repos

export class Repos extends React.Component<ReposProps, {}> { ... }

这是在一个内部创建的 Router

<Router history={browserHistory}>
    {/* ... */}
    <Route path="/repos" component={Repos}>{/* ... */}</Route>
    {/* ... */}
</Router>

某处Repos是一个方法，它从 HTML 表单中获取一些参数并构造一个新路径以将浏览器引导至：

handleSubmit(event: React.FormEvent) {
    /* ... (define userName and repo vars) */
    const path = `/repos/${userName}/${repo}`
    this.context.router.push(path);
}

我的问题是最后一行的和类型是什么？contextrouter

在关于上下文的 React 文档中，我了解到上下文通常在每个元素中定义。这似乎是一个绝妙的主意这里将是确定context在Repos与从定义了一些接口扩展接口react-router的typescript类型定义

interface ReposContext extends Something /* ??? */ { }

在这里，Something将router定义为具有该push方法的某种类型。

该API并没有说Router有一个方法push虽然词汇呢，这是混淆。无论如何，DefinitelyTyped 上的类型定义并没有定义下面的push方法Router（虽然我不相信它们是完美的，但这种遗漏对我来说并不是偶然的）

同一个 API 确实指出了RouterContext哪些提到context.router-context.router确实定义push()了许多其他方法。

好吧，然后我在 react-router 的类型定义中的 history.d.ts 中注意到，该接口History具有所有相同的方法（加上更多

也许这个界面正在变得越来越近。它没有像我想要的那样扩展任何东西（也许这是 react-router 类型改进的空间），但它有我需要的东西。

interface ContextRouter extends History { }

interface ReposContext {
    router: ContextRouter
}

我仍然持怀疑态度，因为它虽然ContextRouter扩展了但并不完全合理History