Utilizing TypeScript version 2.9.+ provides the ability to effortlessly import JSON files, offering advantages such as type safety and intellisense with this approach:

import colorsJson from '../colors.json'; // To use this import style, ensure "esModuleInterop" is enabled (refer to "side notes")
console.log(colorsJson.primaryBright);

Don't forget to include these configurations in the compilerOptions section of your tsconfig.json file (documentation):

"resolveJsonModule": true,
"esModuleInterop": true,

Additional Information:

• It's worth noting that TypeScript 2.9.0 had a bug related to this JSON feature, which was rectified in version 2.9.2
• The esModuleInterop setting is specifically required for default importing colorsJson. If set to false, an alternative import method would be using

  import * as colorsJson from '../colors.json'

Learn how to dynamically load a JSON file in your code

import fs from 'fs'
var dataArray = JSON.parse(fs.readFileSync('data.json', 'utf-8'))

By following this method, you can prevent potential issues with typescript compiler slowing down or crashing due to importing large files, a common occurrence when using resolveJsonModule.

For my specific scenario, I found it necessary to make alterations to tsconfig.node.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true
  },
  "include": [..., "colors.json"]
}

To perform the import in this manner:

import * as colors from './colors.json'

Alternatively, like so:

import colors from './colors.json'

when using "esModuleInterop": true

Utilizing TypeScript version 2.9 and above makes importing JSON files a seamless process, as pointed out by @kentor.

However, for those working with older versions:

To access JSON files in a more TypeScript-friendly manner, ensure that the location of your new typings.d.ts file matches the include property specified in your tsconfig.json file.

If the tsconfig.json file does not include an include property, then the folder structure should resemble this:

- app.ts
+ node_modules/
- package.json
- tsconfig.json
- typings.d.ts

On the other hand, if there is an include property in your tsconfig.json:

{
    "compilerOptions": {
    },
    "exclude"        : [
        "node_modules",
        "**/*spec.ts"
    ], 
    "include"        : [
        "src/**/*"
    ]
}

In this case, the typings.d.ts file should reside within the src directory as per the include property.

+ node_modules/
- package.json
- tsconfig.json
- src/
    - app.ts
    - typings.d.ts

Many responses suggest defining a global declaration for all JSON files.

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

For a more specific approach, consider creating custom typings for individual JSON files. For example, suppose you have a configuration file named config.json structured like this:

{
    "address": "127.0.0.1",
    "port"   : 8080
}

You can define a type specifically for this file:

declare module 'config.json' {
    export const address: string;
    export const port: number;
}

Importing these typed JSON files into your TypeScript code is straightforward:

import * as Config from 'config.json';

export class SomeClass {
    public someMethod: void {
        console.log(Config.address);
        console.log(Config.port);
    }
}

During compilation, remember to manually copy JSON files to your distribution folder. One way to do this is by adding a script to your package.json:

{
    "name"   : "some project",
    "scripts": {
        "build": "rm -rf dist && tsc && cp src/config.json dist/"
    }
}

When working on an Angular project using typescript, I encountered the need to include a .json file in my environment.ts file. In order to achieve this, I had to configure two options in tsconfig:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

After setting up the tsconfig, I was able to import the json file into my environment.ts like so:

import { default as someObjectName } from "../some-json-file.json";

For proper setup,

"resolveJsonModule": true

must be included within compilerOptions in tsconfig.json file.

To import a JSON file without making changes to tsconfig, you can specify that you are importing JSON explicitly.

import dataFile from './dataFile.json' assert { format: "json" };

While this may not completely address the issue at hand, it is a common query among individuals seeking guidance on how to load JSON directly from a file.

Node.js applications often require the use of .json files. Thanks to TypeScript 2.9, the --resolveJsonModule flag allows for easy importing, extracting types from, and generating .json files.

Check out this example:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

// .ts

import settings from "./settings.json";

settings.debug === true;  // This is valid
settings.dry === 2;  // This will throw an error: Operator '===' cannot be applied to types boolean and number


// settings.json

{
    "repo": "TypeScript",
    "dry": false,
    "debug": false
}

Exploring another approach

const info: {[key: string]: any} = require('./info.json');

This way, you can specify the JSON type without resorting to a wildcard.

For instance, creating a customized JSON type.

interface Person {
  name: string;
  age: number;
  birthDate: Date;
}
const personInfo: Person = require('./person.json');

TypeScript 5.3 brought forth the concept of Import Attributes, previously known as Import Assertions, allowing for defining the expected format of imported modules at runtime.

By utilizing Import Attributes, it ensures that modules are imported in the correct format, ensuring that a file with a .json extension actually contains executable JavaScript code and is appropriately interpreted as JSON.

import colors from "./colors.json" with { type: "json" };

To activate the feature, set

"resolveJsonModule": true

const settings = require('./settings.json');

Keep in mind that if you follow the strategies outlined by @kentor

Ensure to include these configurations in the compilerOptions section of your tsconfig.json (reference):

You must append --resolveJsonModule and --esModuleInterop after the tsc command to compile your TypeScript file.

For instance:

tsc --resolveJsonModule --esModuleInterop main.ts

My scenario required me to make a modification:

"include": ["src"]

"include": ["."]

"resolveJsonModule":true

Using the require method is a commonly utilized technique for loading JSON files within Node.js

I have tested all the recommendations provided in this discussion so far, such as enabling resolveJsonModule, setting moduleResolution to "node", and trying different formats of the include statement (assert/with) and require. Despite closing and reopening VSCode multiple times after each change, none of these approaches proved effective.

However, I managed to make

import metadata from './block.json

Interestingly, even when 'metadata' showed errors for './block.json', Intellisense displayed all the defined properties from the JSON file. This project does not contain a declaration for the schema, but VSCode still recognized the file contents despite TypeScript indicating an error.

It's worth noting that I cannot confirm if this solution is version-specific. In my setup, I am using TypeScript 5.3.3, @types/node 20.11.24, along with the provided tsconfig.json configuration. The source files in the src folder are processed by WebPack into ./build. (Note: Mentions of ./dist are included in case TypeScript requires a different outDir compared to WebPack.)

This may not be the definitive solution for everyone, and there could be more elegant alternatives depending on specific needs. However, for me at this moment, this configuration serves as a working solution.

{
    "compilerOptions": {
        // Compiler options here
    },
    "include": ["src"],
    "files": ["src/block.json"]
}

bring in information from '../../data/data.json;

can be a viable choice as well.