在TypeScript中读取本地JSON文件。

Question

我如何在TypeScript中将本地存储的JSON文件读入变量？我有一个看起来像这样的照片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 文件？

- Cameron Cheung

---

“本地存储”是什么意思？它是指您的计算机上还是代码库中的存储？ - programoholic

一个简单的导入就可以了。 - Liad

它存储在代码库中。 - Cameron Cheung

@Liad 我尝试从"./assets/photos.json"导入照片，但它说找不到模块。 - Cameron Cheung

在代码库中并且与代码捆绑在一起，对吧？ - Gaël J

Answer 1

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

简而言之。

打开 `tsconfig.json` 文件，如果 `resolveJsonModule` 在 `compilerOptions` 中不存在，则按照以下方式添加：

"resolveJsonModule": true,

在你想要读取文件的组件中打开并导入文件，例如：

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

以上更改足以导入文件。 这是一个例子：Stackblitz Example。

- programoholic

Answer 2

你可以导入JSON文件

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

然后像下面这样声明类型

const samples = (all as DataType)

- Patrick

Answer 3

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

- Mathlete-101

Answer 4

你需要将这个添加到你的tsconfig文件中

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

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

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

- Liad