`yarn add react-router-dom` 和 `yarn add @types/react-router-dom` 有啥区别？

Posted 2023-02-16

【中文标题】`yarn add react-router-dom` 和 `yarn add @types/react-router-dom` 有啥区别？

【英文标题】：What's the difference between `yarn add react-router-dom` and `yarn add @types/react-router-dom`?`yarn add react-router-dom` 和 `yarn add @types/react-router-dom` 有什么区别？

【发布时间】：2021-10-30 12:48:08

【问题描述】：

在做

yarn add react-router-dom

失败。该应用程序在启动时引发错误，并且 Intellij 将来自 react-router-dom 的导入标记为错误。但是做

yarn add @types/react-router-dom

有效。

不过，我发现的所有示例都显示了第一个 yarn add... 命令。这是react-router-dom 的新功能吗？

如果这有什么不同，我正在使用打字稿。

===编辑===

这是错误消息。这就是我找到解决方案的地方。

/home/dean/src/react/projects/room-reservations-ui_/src/App.tsx
TypeScript error in /home/dean/src/react/projects/room-reservations-ui_/src/App.tsx(5,29):
Could not find a declaration file for module 'react-router-dom'. '/home/dean/src/react/projects/room-reservations-ui_/node_modules/react-router-dom/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-router-dom` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-router-dom';`  TS7016

    3 | import './App.css';
    4 | import Navbar from "./components/Navbar";
  > 5 | import BrowserRouter from "react-router-dom";
      |                             ^
    6 | 
    7 | function App() 
    8 |   return (

【问题讨论】：

yarn add react-router-dom 的错误是什么？来自@types 的那个只是@types 组织（docs.npmjs.com/about-organization-scopes-and-packages）下的另一个包，尽管一个提供了另一个的类型，但它们并不相关，我相信你可能会因为找不到类型而出错对于第一个包

【参考方案1】：

yarn add react-router-dom

这是安装react-router-dom，没有任何类型，如果你尝试使用这个包启动你的应用程序，你会看到你得到的消息

Could not find a declaration file for module 'react-router-dom'.

这并不意味着 react-router-dom 有错误，而是 Typescript 没有为其声明类型，该项目可能是使用 javascript 制作的，或者类型声明在其他地方。

yarn add @types/react-router-dom

这将从DefiniteTyped（https://github.com/DefinitelyTyped/DefinitelyTyped）安装react-router-dom的类型，这是一个声明的存储库，因此我们可以为仅为Javascript创建的库安装类型，但其他人“键入”给我们。

@types/

这个前缀是一个组织，它将引用DefinitelyTyped存储库中的react-router-dom包，它不包含react-router-dom代码，只有类型定义，你可以在这里看到https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-router-dom

它只包含声明，当 Typescript 找不到您正在使用的模块的声明时，它将无法正确显示类型，因此会发出警告

【讨论】：

我已经接受了你的回答，但是其他包不需要@types 前缀：yarn add @material-ui/core yarn add @material-ui/icons 都可以工作。

Material ui 已经在其组件上具有类型定义，例如，github.com/mui-org/material-ui/blob/next/packages/material-ui/…@types 组织在包本身没有类型或作者希望它存在时很有用

【参考方案2】：

简单地说，@types/react-router-dom 包含类型定义。它旨在与打字稿一起使用。你可以看到更多关于这个here。

【参考方案3】：

我遇到了同样的问题。刚刚从带有类型的节点模块中删除了rrd 并重新安装了它

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。