如何使用类型记录React应用程序导入.json文件

Question

我得到了错误：

找不到模块‘./public/data.json’。考虑使用‘-解析’导入具有'.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的链接

​

​

Answer 1

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

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

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

import data from "./data.json"

Answer 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,
    ....
  },

​

Answer 3

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

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