引入json文件时ts报错：Cannot find module ‘./load2.json‘. Consider using ‘--resolveJsonModule‘ to import ...

    创建新项目开发的时候遇到一个问题，出现在引入json文件的时候，报错内容为：

import animationLoading from "./load2.json";

    这个错误是因为 TypeScript 默认情况下不支持直接导入 .json 文件。当你尝试导入一个 JSON 文件时，TypeScript 会报错，因为它不知道如何处理这种扩展名的模块。

    在 tsconfig.json 文件中启用 resolveJsonModule 选项，这样 TypeScript 就可以正确解析 .json 文件。

{
// 解决ts无法识别json文件的问题
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

    启用这个选项后，TypeScript 会允许你直接导入 .json 文件。

    如果你不想启用 resolveJsonModule，可以通过显式声明 JSON 文件的类型来解决这个问题。在你的项目中创建一个类型声明文件（如 types.d.ts），并添加以下内容：

declare module "*.json" {
  const value: any;
  export default value;
}

    这样，TypeScript 就会知道 .json 文件是一个模块，并且可以正确解析它。

    如果你不想修改 tsconfig.json 或添加类型声明，可以使用 require 来导入 JSON 文件。这种方式不会受到 TypeScript 的限制：

const animationLoading = require("./load2.json");

    启用 resolveJsonModule 后，其他的配置代码和引入代码就可以保持不变：

import animationLoading from "./load2.json";

    新项目引入Json文件ts报错是配置问题，三种方案任选其一即可。

    只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

    其他热门文章，请关注：