React，Typescript - 找不到模块...或其相应的类型声明

Posted 2023-02-16

【中文标题】React，Typescript - 找不到模块...或其相应的类型声明

【英文标题】：React, Typescript - Cannot find module ... or its corresponding type declarations

【发布时间】：2021-02-20 05:59:45

【问题描述】：

我在 vs 代码中使用 create-react-app 和 yarn 2 创建了一个新项目。编辑器在导入每个已安装的库时会抛出错误，如下所示：

找不到模块 'react' 或其对应的类型声明。

项目编译运行成功，但错误仍然存​​在。当我将文件的扩展名从.ts 和 .tsx 更改为 .js 和 .jsx 时，错误消失了.我应该如何解决打字稿文件的这个问题？

【参考方案1】：

您需要为您安装的库安装类型。通常你应该这样做：

npm install @types/libName // e.g. npm install @types/react-leaflet

有时DefinitelyTyped repo 中没有可用的类型，而您遇到npm ERR! 404 Not Found: @types/my-untyped-module@latest。在这种情况下你可以做几件事：

1- 在项目根目录下创建decs.d.ts 文件并写入：

    declare module "libName" // e.g declare module 'react-leaflet'

2- 或者简单地使用@ts-ignore 抑制错误：

// @ts-ignore  
import Map from 'react-leaflet'

3- 或者您可以帮自己和他人一个忙，在DefinitelyTyped repo 中添加库类型。

如果还是不行，我首先建议你使用最新版本的 Typescript。如果这样做，请关闭编辑器，删除 node_modules 文件夹并再次安装依赖项（npm install 或 yarn install）并再次检查。

【讨论】：

react 已经安装好了，但是问题依旧。

@AmirFakhimBabaei 您必须为每个已安装的库执行此操作。

"在项目的根目录下创建一个 decs.d.ts 文件并写入其中" ... 哪个项目？我的依赖模块的项目或包含它的项目???

@StartupGuy 您的项目，其中包含没有 ts 类型的模块。

感谢您的精彩回答?

【参考方案2】：

我收到了同样的错误消息，也与导入有关。

在我的情况下，问题是由于导入 png 文件以便在 SVG 中使用它引起的：

import logo from 'url:../../public/img/logo.png';

我收到的信息是：

Cannot find module 'url:../..public/img/logo.png' or its corresponding type declarations.

解决办法：

在项目根目录中有一个文件css.d.ts。必须为导入的各种图形扩展（类型）声明一个模块。 （注意：不适用于项目中使用或引用的图形类型，而是适用于那些 导入 ）

这是此项目的完整 css.d.ts 文件：

declare module '*.scss' 
  const css:  [key: string]: string ;
  export default css;

declare module '*.sass' 
  const css:  [key: string]: string ;
  export default css;

declare module 'react-markup';
declare module '*.webp';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

【讨论】：

也许这条评论可以帮助指导在 Sapper (Svelte) 项目中工作的人们：在 Sapper 中使用 Typescript，将生成一个文件 src/ambient.d.ts，该文件已经声明了几个扩展的类型。这是添加您的最佳位置。

@SillyFreak 谢谢，很好的反馈。请随时接受此答案，并完全按照您的建议从中创建您自己的答案。继续并在 Sapper / Svelte 标签类别中创建一个新答案，并在必要时借用此答案以帮助您的 Sapper 同事。这样，您将知道错误消息或其他关键字的确切措辞，这些关键字将使 Google 员工找到您的答案。 Meilleurs voeux！

【参考方案3】：

我解决了我的问题

创建文件/types/css.d.ts 打开tsconfig.json

添加这个对象：

"include": [
    "src",
    "types"
]

【参考方案4】：

检查 package.json 文件中的依赖对象。 如果安装包格式为 "@somepackage/packagename":version; 然后在导入时您必须使用 从“@somepackage/packagename”导入 abc

如果“@somepackage/”不存在，则不要在导入时使用它。 只需简单地使用 从“包名”导入 abc；