如何使用 Typescript 的声明与从模块导入的接口合并？答案

【问题标题】：How can I use Typescript's declaration merging with an interface imported from a module?如何使用 Typescript 的声明与从模块导入的接口合并？
【发布时间】：2018-10-04 08:47:00
【问题描述】：

https://www.typescriptlang.org/docs/handbook/declaration-merging.html

以上链接提供了有关声明与接口合并的信息。我希望能够使用具有通用组件的接口来做到这一点。我目前正在使用 Typescript 3.0.3。

这是我想要的，但我不明白为什么我不能对声明合并做同样的事情。

interface MyRouteComponentProps<P, C extends StaticContext = StaticContext> extends RouteComponentProps<P, C> {
    loadCandidateFromQueryParam: (candidateId: number) => void
}

class CandidateDetailContainer extends React.Component<MyRouteComponentProps<RouteMatchProps>, {}> {

    public componentWillMount() {
        this.props.loadCandidateFromQueryParam(Number(this.props.match.params.candidateId));
    }

为什么这不起作用？

interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
    loadCandidateFromQueryParam: (candidateId: number) => void
}

class CandidateDetailContainer extends React.Component<RouteComponentProps<RouteMatchProps>, {}> {

它似乎完全覆盖了 RouteComponentProps 的整个定义，而不是合并它们。我得到与从未使用过的 P 和 C 相关的错误（如果合并了定义，那么我希望这些错误会消失，因为它们已在主要定义中使用）。然后我收到一个关于“匹配”字段不存在的错误。同样，原始定义中存在的另一个字段。

这里是我试图合并的原始定义作为参考。

export interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
  history: H.History;
  location: H.Location;
  match: match<P>;
  staticContext: C | undefined;
}

【问题讨论】：

标签： typescript generics

【解决方案1】：

事实上，在您的第二个示例中，当我添加我认为您必须拥有的导入时：

import * as React from "react";
import { RouteComponentProps, StaticContext } from "react-router";

我在导入 RouteComponentProps 时遇到错误。

您不能通过声明同名的本地符号来将内容合并到导入的符号（接口、命名空间等）中；这将是一个错误，或者它会隐藏导入的符号。要合并定义，它们必须在同一范围内。在将内容合并到模块中的符号的情况下，您可以使用模块扩充将您的定义置于原始模块的范围内：

declare module "react-router" {
    interface RouteComponentProps<Params, C extends StaticContext = StaticContext> {
        loadCandidateFromQueryParam: (candidateId: number) => void
    }
}

（使它成为模块扩充而不是模块声明的原因在于它嵌套在另一个模块中。我知道，晦涩难懂。）请注意，类型参数的名称必须与原始接口中的名称相同。

【讨论】：

嗯，这是有道理的。我没有考虑到定义在模块中的事实。