如何使用 typescript React App 导入 .json 文件

Posted 2023-02-22

【中文标题】如何使用 typescript React App 导入 .json 文件

【英文标题】：How to import .json file with typescript React App

【发布时间】：2021-09-27 14:01:03

【问题描述】：

我收到了错误：

找不到模块“../public/data.json”。考虑使用“--resolveJsonModule”导入扩展名为“.json”的模块。

import "./styles.css";
import data from "../public/data.json"; 
/**
 *
 * Welcome to the DDS coding challenge.
 *
 * Load `/public/data.json` as if it were a GET endpoint
 * and render it in a table using `/public/table.png` design.
 *
 * Make this behaviour reusable.
 *
 * Ask questions & have fun!
 *
 */
export default function App() 
  return <div className="App"></div>;

这是挑战的链接 -> https://codesandbox.io/s/staging-snow-vvmvd?file=/src/App.tsx

【参考方案1】：

错误信息告诉你TypeScript默认不能导入JSON，你必须先启用编译器选项resolveJsonModule。要在 React 项目中执行此操作，请将以下内容添加到您的 tsconfig.json：

  "compilerOptions": 
    "resolveJsonModule": true
  

接下来，当你导入 JSON 文件时，你必须给它一个相对于当前文件的路径。 JSON 文件将与您的 javascript 捆绑在一起，因此它可能应该放在 /src 目录而不是 /public 目录中。例如，如果你把它和 App.tsx 放在同一个目录下，那么你可以像这样导入它：

import data from "./data.json"

【参考方案2】：

// data.json:

"greeting" : "xin chao Vietnam"

// component:
import * as data from 'data.json';
let greeting = data.greeting;
//registering jsonModule in tsconfig.json
"compilerOptions": 
    ....
    "resolveJsonModule": true,
    ....
  ,

【参考方案3】：

您可以同时导入和定义导入数据的类型 例如

const filters: [key: string]: any = require('./filters.json');