如何将 JSON 文件导入 TypeScript 文件？

Question

我正在使用 Angular Maps 构建地图应用程序，并希望将 JSON 文件作为定义位置的标记列表导入。我希望将此 JSON 文件用作 app.component.ts 内的 marker[] 数组。而不是在 TypeScript 文件中定义硬编码的标记数组。

导入此 JSON 文件以在我的项目中使用的最佳过程是什么？任何方向都非常感谢！

原文由 aonepathan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在最近的打字稿更新之前，Aonepathan 的单行字一直为我工作。

我发现 Jecelyn Yeen 的 帖子 建议将此片段发布到您的 TS 定义文件中

将文件 typings.d.ts 添加到项目的根文件夹，内容如下

declare module "*.json" {
    const value: any;
    export default value;
}

然后像这样导入您的数据：

import * as data from './example.json';

2019 年 7 月更新：

Typescript 2.9 ( docs ) 引入了一个更好、更智能的解决方案。脚步：

1. 在您的 tsconfig.json 文件中添加 resolveJsonModule 支持这一行：

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

import 语句现在可以假定默认导出：

import data from './example.json';

并且智能感知现在将检查 json 文件以查看您是否可以使用 Array 等方法。很酷。

原文由 ryanrain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

角 10

您现在应该编辑 tsconfig.app.json （注意名称中的 “app” ）文件。

在那里你会找到 compilerOptions ，你只需添加 resolveJsonModule: true 。

因此，例如，一个全新项目中的文件应如下所示：

 /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "resolveJsonModule": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

原文由 Absay 发布，翻译遵循 CC BY-SA 4.0 许可协议