我必须保持react-app-env.d.ts文件在VS Code中打开，以便我的组件不会说Cannot find module '../../assets/icon.png'

Question

我有一个react-app-env.d.ts 文件，其中包含一堆声明来处理不同的图像扩展类型。但是，一旦我关闭此选项卡（在 VS Code 中），我正在导入图标的组件，它就会抱怨

Cannot find module

...所以看来我需要将

react-app-env.d.ts

文件保持打开状态以避免 Lint或 VS 代码错误。这太奇怪了，我相信有人知道为什么

我认为 **app-env.d.ts 文件足以解决导入图标时的“找不到模块...”错误

Answer 1

最近，我正在使用 typescript 开发一个 React 项目，其中我尝试从 asset 目录导入图像文件。好吧，代码在浏览器中运行良好，但我看到导入警报，指出“找不到模块‘@/assets/images/icon.png’或其相应的类型声明”。有趣的是，浏览器上一切正常，但我对此图像导入的警报不满意。

所以我试图弄清楚为什么我的打字稿对这种导入有点不满意。

我遇到的错误通常发生在 TypeScript 无法找到图像或其类型声明的模块时。发生这种情况是因为 TypeScript 默认情况下不知道如何处理图像等非代码资源。以下是我们解决此问题的方法：

为图像模块创建声明文件：您需要告诉 TypeScript 如何处理图像文件的导入。您可以通过声明图像文件模块来做到这一点。 在项目中创建一个名为 custom.d.ts 的新文件（您可以将其放置在 src 目录或 types 目录中（如果有））。然后，添加以下内容：

declare module "*.png" {
  const value: string;
  export default value;
}

此代码告诉 TypeScript，当它遇到 .png 文件的 import 语句时，应将其视为导出字符串（图像的 URL）的模块。

确保您的 tsconfig.json 包含声明文件：确保项目中的 tsconfig.json 文件配置为包含您刚刚创建的 custom.d.ts 文件。如果您的 tsconfig.json 有一个包含数组，请将声明文件的路径添加到该数组中。如果没有包含数组，TypeScript 将默认包含项目中的所有 .ts、.tsx 和 .d.ts 文件，只要它们未排除在排除数组中即可。

以下是包含数组后 tsconfig.json 的示例：

{
  "compilerOptions": {
    // compiler options...
  },
  "include": ["src/**/*", "src/custom.d.ts"]
}

进行这些更改后，在 IDE 中重新启动我们的 TypeScript 服务器（如果您使用的是 VS Code，则可以通过打开命令选项板并运行“TypeScript：重新启动 TS 服务器”命令来完成此操作）或在必要时重新启动我们的开发服务器.

这应该可以解决错误并允许我们导入图像而不会出现 TypeScript 错误。