typescript 中如何导入 json 文件-ag捕鱼王app官网

要在 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 变量的所有属性。