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

Question

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

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';

ref：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;
}

Answer 2

尝试将导入更改为：import {test} from './data.json'。这对我有用。 如果您希望它命名为data，则可以在.JSON文件中将test的名称更改为data。或在导入后将其分配给另一个变量。