打字稿声明合并以扩展或覆盖模块类型或接口属性

Question

我正在使用来自@types/react-router-dom 版本4.3.1 的类型，它从@types/react-router 和@types/history 导入类型。

在我的应用程序中，我总是有两个处于位置状态的属性，我希望它们自动从RouteComponentProps 接口中拉出，而不必每次都将自定义的LocationState 类型变量传递给接口。

 

RouteComponentProps接口的定义在react-router中，如下：

import * as H from 'history';

export interface RouteComponentProps<Params extends { [K in keyof Params]?: string } = {}, C extends StaticContext = StaticContext, S = H.LocationState> {
  history: H.History;
  location: H.Location<S>;
  match: match<Params>;
  staticContext?: C;
}

history 中引用的接口/类型的定义是：

export interface Location<S = LocationState> {
    pathname: Pathname;
    search: Search;
    state: S;
    hash: Hash;
    key?: LocationKey;
}

export type LocationState = History.LocationState;

export namespace History {
    export type LocationState = any;
}

 

我想要扩展 Location 接口的状态属性类型定义以包含自定义接口（即包含始终可用的属性）。比如state: S & { A: string; B: string; }。

 

我已尝试在 react-router 的模块声明中重新声明 RouteComponentProps 接口，但我尝试的所有操作都会导致 All declarations of 'RouteComponentProps' must have identical type parameters.ts(2428) 或 Subsequent property declarations must have the same type. Property 'location' must be of type 'Location<S>', but here has type 'any'.ts(2717)。

我还尝试在历史模块声明中重新声明Location 接口，结果相同。之后，我尝试在 Historynamespace 内部和外部重新声明 LocationState 类型，但这总是导致 Duplicate identifier 'LocationState'.ts(2300)。

 

除了用不同的名称为RouteComponentProps 编写自定义界面之外，我还能做些什么来获得所需的行为？我希望能够在项目中导入该接口，用它扩展组件的 props 并具有可从 props.location.state 访问的属性的 A 和 B 类型，但也能够将任何其他属性视为 any , 无需每次都传递类型变量定义。

Answer 1

这可能不是您正在寻找的解决方案，但我通常有一个自定义位置界面（可能从您应用上的共享 .ts 文件中导出它），然后在该界面上使用 useLocation 挂钩。

import React, { ReactElement } from "react";
import { useLocation } from "react-router-dom";

interface CustomLocationState {
    A: string;
    B: string;
}

export default ():ReactElement => {
    const { state: {A, B} } = useLocation<CustomLocationState>();

    return <div>{A} - {B}</div>
}