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

IT技术 javascript typescript react-router react-jsx typescript-typings
2021-05-15 11:47:54

我的项目使用与typescriptreact。我需要使用 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;
}

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

错误 TS2339：属性 'name' 不存在于类型 'IntrinsicAttributes & IntrinsicClassAttributes> & Readonly<...'

我认为直接编辑 node_modules 文件不是一个好习惯。

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

谢谢。

2个回答

您不需要更改原始输入。您可以使用“module扩充”来做到这一点：https : //www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation

要测试，请在导入原始module后添加以下module声明：

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）放在您的项目中并放置该增强界面。

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

简短回答：在https://github.com/DefinitelyTyped/DefinitelyTyped提交问题或提交 PR

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

最好的

其它你可能感兴趣的问题
上一篇使用 Express/Node 和 MongoDB 响应 POST 请求 下一篇如何使用 Azure Easy Auth 获取访问令牌？