How to Import a JSON file in Typescript

Jasser Mark Arioste

Jasser Mark Arioste

How to Import a JSON file in Typescript

Importing JSON files is a common practice in Node.js projects. In this short tutorial, you will learn how to statically import JSON files in Typescript. 

I created a GitHub repo if you want to follow along with this tutorial. You can simply clone it and run `yarn dev`

Import a JSON file in Typescript #

Suppose you have a JSON file data/users.json that contains user objects. To import this file in Typescript you have to do at least three steps:

  1. In tsconfig.json, set "esModuleInterop" option to true.
  2. In tsconfig.json, set "resolveJsonModule" option to true.
  3. Import the file using import users from "./data/users.json"

Setting tsconfig.json #

Make sure you've set esModuleInterop and resolveJsonModule to true as shown below:

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

Importing the JSON file. #

Assuming your file is located in ./data/users.json, To import the file you can do the following:

// index.ts
import users from "./data/users.json"

Also, make sure to use the correct relative path when importing. For example, if you're importing from "/components/some_component.ts" you can do:

// components/some_component.ts
import users from "../data/users.json"
const user = users[0];

What about the typings? #

Normally, Typescript automatically infers the types from the JSON file. For example, our users.json file records might look like this:

// data.users.json
  "id": 1,
  "first_name": "Allayne",
  "last_name": "Wringe",
  "email": "",
  "gender": "Male",
  "ip_address": "",
  "country": "CL"

When we import the file, it automatically infers the type for us:

Importing JSON file in Typescript

What if I want to use my own types? #

If you created your own types, it's still possible to use using the as operator in typescript. For example:

// types/User.ts
export interface User {
  first_name?: string;
  last_name?: string;
  id: number;
  email: string;
  gender: string;
  ip_address: string;
  country?: string;

Here's how to modify the inferred typings:

// index.ts
import _users from "./data/users.json"
import { User } from "./types/User";
const users = _users as User[];
const user = users[0];

And that's it.

Conclusion  #

We learned how to statically import JSON files using the import statement in a TypeScript project.  

If you like this tutorial, please leave a like or share this article. For future tutorials like this, please subscribe to our newsletter or follow me on Twitter.

Resources #

Credits: Image by Trond Giæver Myhre from Pixabay

Share this post!

Related Posts


This content may contain links to products, software and services. Please assume all such links are affiliate links which may result in my earning commissions and fees.
As an Amazon Associate, I earn from qualifying purchases. This means that whenever you buy a product on Amazon from a link on our site, we receive a small percentage of its price at no extra cost to you. This helps us continue to provide valuable content and reviews to you. Thank you for your support!
Donate to ReactHustle