如何在 tsx react 中使用 npm/yarn答案

【问题标题】：how to use npm/yarn in tsx react如何在 tsx react 中使用 npm/yarn
【发布时间】：2020-09-22 00:15:44
【问题描述】：

好吧，我正在转向打字稿进行反应。但问题是，当我从 npm/yarn 安装一些包时，我无法在我的 .tsx 组件中使用它。它说要查看@types/，但有时该包不可用那么，如何在.tsx 文件中使用 npm pacakges

【问题讨论】：

This article 将是一个很好的起点。

标签： reactjs typescript tsx

【解决方案1】：

你可以使用它。由于缺少必须单独安装的减速类型，因此仅显示警告。减速类型以@types/ 为前缀。

一些 js 包在安装的包中已经有类型减速，但其中一些没有。对于那些你必须单独安装它，如果它存在的话。

【讨论】：

@KanekiGhoul 就像 js 包没有区别。写 yarn add 'package' 然后回车。 typescript 唯一需要的就是它的编译器
考虑我下载了任何包
yarn add testPackage 所以要在 tsx 上使用它我使用 import {component} from 'testPackage' 但它不适用于 tsx
@KanekiGhoul 将包复制到 node_modules 文件夹中。然而，这不是正确的方法。如果是本地包，有更好的安装和使用方法，如果是公共包，使用 yarn add 肯定没问题
@KanekiGhoul 它是哪个包？您得到的错误与打字稿没有直接关系

【解决方案2】：

有些库没有 typescript 支持，因此，在你的 react-typescript 项目中使用它之前，你可以通过输入你想要使用的包的名称来检查它们在 https://npmjs.com 中的哪里有 typescript 支持搜索框并将 @types/ 放在其前面。如果这样的包可用，您可以在您的项目中安全地使用它。在下面的示例中，您可以看到 lodash 库支持打字稿。所以你可以安全地在你的项目目录中运行npm install @types/lodash并使用它。

【讨论】：

如果没有 @types/myDesiredPackage 怎么办，有没有办法使用它？我的许多心爱的包不在@types 中
不幸的是，没有其他办法。不过，有些包不会单独发布 '@types' 包（例如 semantic-ui-react 库）。它们在包本身中包含类型，因为它是用 typescript 编写的。因此，如果您想要的库没有“@types”包，请不要放弃希望。阅读他们的文档，看看他们是否支持打字稿。

【解决方案3】：

访问https://definitelytyped.org/ 和TypeSearch 以查找您需要在TS 应用程序中运行的包的定义。这将允许你使用一些你最喜欢的 NPM JS 包的 TS 类型。

【讨论】：