在 create-react-app + 打字稿中导入静态 JSON

Question

我正在学习打字稿，目前正在尝试导入我本地存储在使用 create-react-app 引导的项目中的简单 json 文件。

data.json 看起来像这样：

{
  "test": "123",
}

在我中，App.tsx我尝试使用json-loader. 双方App.tsx并data.json在同一个文件夹和进口看起来像这样：

import data from './data.json'

我已经尝试了解决这个问题的几种解决方案，但似乎没有任何效果。这些解决方案是import * as data from './data.json'和const data = require('./data.json')

Answer 1

解决方案 1：您可以使用以下语句创建一个名为 data.json.ts 的新文件：

export default {your_json};

然后导入：

import { default as data } from './path/data.json';

参考： https: //github.com/frankwallis/plugin-typescript/issues/129

解决方案 2：这里的问题是，当您编译项目（例如编译到名为 lib 的文件夹中）时，lib 文件夹中没有 .json 文件。您只需将该文件包含到您的构建中或手动将该文件复制到您的 lib 文件夹中即可。要导入文件，您必须使用：

• const data = require('data.json');
• 声明你自己的类型。创建一个名为your_file_name.d.ts的新文件，并将以下代码粘贴到该文件中：

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