在打字稿中读取本地 JSON 文件答案

【问题标题】：Read local JSON file in typescript在打字稿中读取本地 JSON 文件
【发布时间】：2021-08-22 18:21:47
【问题描述】：

如何将本地存储的 JSON 文件读入 typescript 中的变量？我有一个看起来像这样的 json 照片文件：

[
    {
      "id": 1,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    },
    {
      "id": 2,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    },
    {
      "id": 3,
      "camera": "",
      "location": "",
      "iso": 0,
      "aperture": 0,
      "focal length": 0
    }
]

我正在尝试将文件作为文本读取，然后使用Json.Parse，但我如何首先将其作为文本读取？我试过使用 FileReader.readAsText 但它只接受 blob 对象。我需要从我的文件路径创建一个 blob 对象还是有更简单的方法来读取本地 JSON 文件？

【问题讨论】：

本地存储是什么意思？它是在你的机器上还是在代码库中？
一个简单的导入就可以了
它存储在代码库中
@Liad 我尝试从“./assets/photos.json”导入照片，但它说找不到模块
在代码库中并与代码捆绑在一起，对吧？

标签： javascript json angular typescript reader

【解决方案1】：

你可以这样做，但需要修改tsconfig.json。在tsconfig.json 中有一个名为resolveJsonModule 的设置。默认情况下，它的值设置为false。

TL;DR

打开tsconfig.json，如果resolveJsonModule不在compilerOptions中，则添加如下：

"resolveJsonModule": true,

打开要读取文件并导入的组件，如下所示：

import * as photos from '../../path-to file';

以上更改足以导入文件。

示例如下：Stackblitz Example

【讨论】：

【解决方案2】：

如果您不希望文件更改，您可以使用require('path') 获取它。它应该只返回对象；无需 JSON.parse。

【讨论】：

【解决方案3】：

可以导入json文件

import all from '../../path/to/file.json'

然后像下面这样声明输入

const samples = (all as DataType)

【讨论】：

【解决方案4】：

您需要将此添加到您的 tsconfig 中

compilerOptions: { ... 
  "resolveJsonModule": true,
}

然后像任何模块一样导入它

import myfile from './path/to/json/file.json';

【讨论】：