In ES6/ES2015, you can import json file in your code. For example,
Given you have this example.json` file:
{"name": "testing"}
You could import it in ES6/ES2015 like this.
// ES6/ES2015// app.js
import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'
In Typescript, however, the same code will throw error:
Cannot find module 'example.json'
[UPDATE] Solution: Typescript 2.9 supports JSON import!
If you are using Typescript version 2.9, you don’t need to follow solution 2. Here is how you can do it:
In your `tsconfig.json` file, under compiler options, add these two lines:
{"compilerOptions": {"resolveJsonModule": true,"esModuleInterop": true}}
Then you can import json like this:
// Typescript// app.ts
import data from './example.json';
const word = (<any>data).name;
console.log(word); // output 'testing'
Easy Peasy!
Solution: Using Wildcard Module Name
In Typescript version 2 +, we can use wildcard character in module name. In your TS Definition file, e.g. typings.d.ts`, you can add this line:
declare module "*.json" {const value: any;export default value;}
Then, your code will work like charm!
// Typescript// app.ts
import * as data from './example.json';
const word = (<any>data).name;
console.log(word); // output 'testing'
Sample code here: https://github.com/chybie/ts-json
This solution works well with Angular project too.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMIfamily. We are now accepting submissions and happy to discuss advertising &sponsorship opportunities.
To learn more, read our about page, like/message us on Facebook, or simply, tweet/DM @HackerNoon.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!