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

【问题标题】：How to import .json file with typescript React App如何使用 typescript React App 导入 .json 文件
【发布时间】：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

【问题讨论】：

标签： json reactjs typescript

【解决方案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');

【讨论】：