如何在 TypeScript 中导入 JSON 文件

作者

在 TypeScript 中导入一个 JSON 文件

How to Import a JSON file in TypeScript

要在 TypeScript 中导入 JSON 文件：

  1. 在您的文件中设置resolveJsonModule为。truetsconfig.json
  2. 设置esModuleInterop为. true_tsconfig.json
  3. 将 JSON 文件导入为import employee from './employee.json'.

你应该做的第一件事是确保你已经在你的文件中设置resolveJsonModule和
esModuleInterop到。truetsconfig.json

tsconfig.json文件
{
  "compilerOptions": {
    // ... other options
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

这是我们将在 TypeScript 文件中导入的 JSON 文件。

雇员.json
{
  "id": 1,
  "name": "James Doe",
  "salary": 100,
  "years": [2022, 2023, 2024]
}

下面是我们如何在文件中导入 JSONindex.ts文件。

索引.ts
import employee from './employee.json';

// 👇️ "JAMES DOE"
console.log(employee.name.toUpperCase());

// 👇️ [2022, 2023, 2024]
console.log(employee.years);

employee.json如果必须，请确保更正文件的路径。

上面的示例假定employee.json文件和index.ts位于同一目录中。例如，如果您的employee.json文件位于一个目录之上，您可以将其导入为
import employee from '../employee.json'.

如果出现错误，请尝试在
文件中设置moduleResolution为。nodetsconfig.json

tsconfig.json文件
{
  "compilerOptions": {
    // ... other settings
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

您还应该确保json您正在导入的文件位于您的rootDir.

比如rootDir我里面的settingtsconfig.json 设置为src，也就是说json我要导入的文件必须在src目录下。

如果您的json文件不在您的目录下rootDir，您会得到一个错误：“文件不在‘rootDir’下。‘rootDir’应该包含所有源文件。” .

如果您仍然无法导入 json 文件，请尝试将其导入为：

索引.ts
import * as employee from './employee.json';

// 👇️ "James Doe"
console.log(employee.name.toUpperCase());

// 👇️ [2022, 2023, 2024]
console.log(employee.years);

esModuleInterop
选项默认设置为，false这导致它像对待 ES6 模块一样对待 CommonJS 模块。这会导致一些问题。

设置esModuleInterop修复true这些问题。

resolveJSONModule
选项允许我们在 TypeScript 文件中
导入带有扩展名的模块。.json

该resolveJSONModule选项false默认设置为，因此请确保true在您的tsconfig.json文件中将其设置为。

如果该选项设置为false，您将收到错误消息 – “找不到模块 ‘./employee.json’。考虑使用 ‘–resolveJsonModule’ 导入带有 ‘.json’ extension.ts(2732) 的模块”。

import此设置还基于静态 JSON 形状生成类型，并在您的 IDE 中启用自动完成。

rootDir选项指向所有非声明输入文件的最长公共路径。

该设置强制所有需要发出的文件都在
rootDir路径下。这意味着您的.json文件必须在指定
rootDir的目录下才能导入。

–

发表评论