将数组从 JSON 文件导入 Typescript 文件

Posted 2023-03-13

【中文标题】将数组从 JSON 文件导入 Typescript 文件

【英文标题】：Import Array from JSON File into Typescript File

【发布时间】：2020-06-24 06:52:09

【问题描述】：

我有一个 JSON 文件，其中包含一个数组对象：

[
  
    "VergiNo": "XXXXXXX"
  ,
  
    "VergiNo": "YYYYYY"
  ,
  
    "VergiNo": "ZZZZZZ"
  
]

然后我将此 JSON 文件导入到我的 Typescript 文件中

import * as firmalar from "../firmalar.json";

const firmaPromises = firmalar.map((firma) => firma.VergiNo + "XYZ");

以上代码没有给出语法错误，但是当我运行应用程序并对其进行调试时，firmalar 对象被视为对象而不是数组，因此它不处理映射方法。

我在这里做错了什么吗？

【问题讨论】：

firmalar.json 文件返回字符串只需用 JSON.parse(firmalar) 解析即可。

【参考方案1】：

我会尝试解析 JSON。那应该返回一个数组。

import * as firmalar from "../firmalar.json";

const firmalarArray = JSON.parse(firmalar);
const firmaPromises = firmalarArray.map((firma) => firma.VergiNo + "XYZ");

【讨论】：

这给出了一个语法错误，因为firmalar 未被识别为字符串。即使我使用：const firmalarArray: [ VergiNo: string ] = JSON.parse(firmalar.toString()); 它在运行时也不起作用。

【参考方案2】：

您正在导入整个模块。

您可以只导入该常量：

import  yourArray  from "../firmalar.json";

或者从模块中提取数组：

const firmalarArray = JSON.parse(firmalar.yourArray);

【参考方案3】：

我最终使用 require() 来获取 JSON 并将其转换为我的对象，如下所示：

// eslint-disable-next-line @typescript-eslint/no-var-requires
const firmalar = require("./firmalar.json");

// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const firmalarArray:  VergiNo: string [] = firmalar;

现在它可以按预期工作了。 This post 帮我找到了解决方案。

【参考方案4】：

要导入 JSON 数据，您应该使用：

import firmalar from "../firmalar.json";

这将在不更改的情况下导入它，并且您将获得一个数组。

当您使用 * as firmalar 进行导入时，它会尝试将 JSON 转换为模块，这是一种对象。检查它你会发现它有 Object 样式的访问器，所以firmalar[0] 可以工作，但firmalar.length 不行。

【讨论】：

这很好用！但是，您需要将 allowSyntheticDefaultImports 标志添加到您的 tsconfig.json 并将其设置为 true