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




angular google-maps (7)

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

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


Aonepathan的单行为我工作,直到最近的打字稿更新。

我找到了Jecelyn Yeen的 post ,建议将此片段发布到您的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';

现在,intellisense将检查json文件以查看是否可以使用Array等方法。 很酷。


Typescript 2.9开始 ,可以简单地添加:

"compilerOptions": {
    "resolveJsonModule": true
}

tsconfig.json 。 此后,使用json文件很容易(VSCode中也会有很好的类型推断):

data.json

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

在您的Typescript文件中:

import { cases } from './data.json';


在angular7中,我只是使用了

let routesObject = require('./routes.json');

我的routes.json文件看起来像这样

{

    "routeEmployeeList":    "employee-list",
    "routeEmployeeDetail":      "employee/:id"
}

您可以使用访问json项目

routesObject.routeEmployeeList

对于Angular 7+,

1)将一个文件“typings.d.ts”添加到项目的根文件夹(例如,src / typings.d.ts):

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

2)导入和访问JSON数据:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

要么:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}

我已经阅读了一些回复,它们似乎对我不起作用。 我正在使用Typescript 2.9.2,Angular 6并尝试在Jasmine单元测试中导入JSON。 这就是我的诀窍。

加:

"resolveJsonModule": true,

tsconfig.json

导入如:

import * as nameOfJson from 'path/to/file.json';

停止 ng test ,重新开始。

参考: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-importshttps://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports


正如在 reddit帖子中所述 ,在Angular 7之后,您可以简化以下两个步骤:

  1. 将这三行添加到 tsconfig.json 文件中的 tsconfig.json
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. 导入您的json数据:
import myData from '../assets/data/my-data.json';

就是这样。 您现在可以在组件/服务中使用 myData


let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }






maps