迹忆客 专注技术分享

要在 TypeScript 中导入 JSON 文件：

1. 在 tsconfig.json 文件中将 resolveJsonModule 设置为 true。
2. 在 tsconfig.json 中将 esModuleInterop 设置为 true。
3. 将 JSON 文件作为 import employee from './employee.json' 导入。

确保已在 tsconfig.json 文件中将 resolveJsonModule 和 esModuleInterop 设置为 true。

{
  "compilerOptions": {
    // ... other options
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

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

employee.json

{
  "id": 1,
  "name": "Fql Jiyik",
  "salary": 50,
  "years": [2022, 2023, 2024]
}

导入JSON文件时指定正确的路径

下面是我们如何将 JSON 文件导入 index.ts 文件。

import employee from './employee.json';

// 👇️ "FQL JIYIK"
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'。

在 tsconfig.json 文件中将 moduleResolution 设置为 node

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

{
  "compilerOptions": {
    // ... other settings
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true
  }
}

还应确保要导入的 JSON 文件位于 rootDir 下。

例如 ，我的 tsconfig.json 中的 rootDir 设置设置为 src。 因此，我导入的 json 文件必须位于 src 目录下。

如果你的 json 文件不在你的 rootDir 下，你会得到一个错误：“**File is not under 'rootDir'. 'rootDir' is expected to contain all source files.**”。

如果仍然无法导入 JSON 文件，请尝试按如下方式导入。

import * as employee from './employee.json';

// 👇️ "FQL JIYIK"
console.log(employee.name.toUpperCase());

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

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

将 esModuleInterop 设置为 true 可以解决这些问题。

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

JSON导入自动正确输入

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

如果该选项设置为 false，我们将收到错误消息——“**Cannot find module './employee.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)**”。

此设置还会根据静态 JSON 形状生成导入类型，并在我们的 IDE 中启用自动完成。

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

该设置强制所有需要发出的文件都在 rootDir 路径下。 因此，我们的 .json 文件必须位于指定的 rootDir 下才能进行导入。

为导入的 JSON 文件指定不同的类型

如果需要为导入的 JSON 对象指定不同的类型，请使用类型断言。

import emp from './employee.json';

type Employee = {
  id: number;
  name: string;
  salary: number;
  years: number[];
};

const employee = emp as Employee;

console.log(employee.id);
console.log(employee.name);
console.log(employee.salary);
console.log(employee.years);

当我们有关于 TypeScript 不知道的值类型的信息时，使用类型断言。

employee 变量现在是 Employee 类型，因此我们可以访问 Employee 变量的所有属性。