@types/react-router 的 Typescript 自定义 @types 包

Question

我的项目使用 React with typescript。我需要使用 react-breadcrumbs 来显示 react-router 的 Breadcrumb。

现在我添加两个@type包到我的package.json

 "dependencies": {
   "@types/react-breadcrumbs": "^1.3.7",
   "@types/react-router": "^3.0.8"
 }

react-breadcrumb 需要使用 route.props.name 来显示面包屑的名称，但是当我在 npm 中使用 @type 包时 Route.d.ts 文件在接口 RouteProps 中没有名称 Props。

interface RouteProps extends IndexRouteProps {
    path?: RoutePattern;
}
interface IndexRouteProps {
    component?: RouteComponent;
    components?: RouteComponents;
    getComponent?: (nextState: RouterState, callback: ComponentCallback) => void;
    getComponents?: (nextState: RouterState, callback: ComponentsCallback) => void;
    onEnter?: EnterHook;
    onChange?: ChangeHook;
    onLeave?: LeaveHook;
}

所以我需要直接编辑node_modules中的Route.d.ts文件到

export interface RouteProps extends IndexRouteProps {
    path?: RoutePattern;
    name?: String;
}

如果我不编辑它我会编译错误并显示

error TS2339: Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<...'

我认为直接编辑 node_modules 文件不是一个好的做法。

我可以用其他方法自定义类型文件吗？

谢谢。

Answer 1

长答案：模块扩充。 https://www.infoq.com/news/2016/03/typescript1-8-released

简答：在 https://github.com/DefinitelyTyped/DefinitelyTyped

提交问题或提交 PR

为什么第二个答案更短？因为它可能会花费您更少的时间。

最佳

Answer 2

你不需要改变原来的打字。您可以使用 "Module Augmentation" 来做到这一点：https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

为了测试，在导入原始模块后添加以下模块声明：

declare module "react-router/lib/Route" {
    interface RouteProps {
        name?: String;
    }
}

像这样：

import { RouteProps } from "@types/react-router";

declare module "react-router/lib/Route" {
    interface RouteProps {
        name?: String;
    }
}

let x: RouteProps;

x.name; // <- no error!

现在您可以创建一个文件来将您的自定义类型（例如 custom-typings.d.ts）放入您的项目中，并放置该扩充接口。

@types/react-router 的 Typescript 自定义 @types 包

Typescript custom @types package for @types/react-router

javascript

typescript

react-jsx

react-router

typescript-typings