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

Question

如何将本地存储的 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 文件？

Answer 1

如果您不希望文件发生变化，您可以使用require('path') 来获取它。它应该只是 return 对象；不需要 JSON.parse.

Answer 2

您可以导入 json 文件

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

然后像下面这样声明输入

const samples = (all as DataType)

Answer 3

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

TL;DR

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

"resolveJsonModule": true,

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

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

以上更改足以导入文件。

示例如下：Stackblitz Example

Answer 4

您需要将其添加到您的 tsconfig

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

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

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

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

Read local JSON file in typescript

javascript

json

typescript

reader

angular