Import JSON file in node application with TypeScript

Question

I'm really getting crazy because I can't find a solution for this. What I want to archive is to import a JSON file with a configuration into my TypeScript file. I've learned that I need a declaration file. So I've added a file json-loader.d.ts into my project. I also tried it at several levels (root, typings folder, custom_typings folder) because this are the solutions I've found. The file content looks like this:

declare module "json!*" {
    let json: any;
    export = json;
}

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

But the compiler still tells me, that it is not possible to import the JSON file, because it isn't a module. So, how is the compiler getting aware, that there is such a declaration file?

I already tried to modify my tsconfig.json like this:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]  
}

But it still doesn't work. Any suggestions?

Thanks!

I've tried: import * as config from '../config.json'. Should work when JSON is handled like a module I guess... — ppulwey
– ppulwey, Commented Jul 6, 2017 at 18:23
In case someone stumbles across that question. For nodejs applications you can use npmjs.com/package/load-json-file — ppulwey
– ppulwey, Commented Oct 28, 2019 at 11:12

tony · Accepted Answer · 2017-07-07 00:07:24Z

11

Examples on the web that use declare module "*.json" work because Webpack is configured to load JSON files.

If you don't want to bother with that you can use var instead of import:

var json = require('../config.json');

as suggested in this answer

answered Jul 7, 2017 at 0:07

tony

1,3461 gold badge13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ppulwey Over a year ago

Thanks. This works. Only forgot to run my gulp task that copied the .json file to the dist directory ... (ツ)

jlewkovich Over a year ago

This gets me past the compile error but I still get a Cannot find module error at runtime. NOTE: Trying to import json into a jasmine spec file

Erik Vullings · Accepted Answer · 2018-07-10 09:17:47Z

1

I've successfully used the following to import my package.json inside a CLI program (so I can re-use the version, license and description information in my help page).

declare module '*.json' {
  const foo: {
    name: string;
    version: string;
    author: string;
    license: string;
    description: string;
  };
  export = foo;
}

Alternatively, you can import other files containing interface descriptions etc., but you need to put the imports inside the module declaration, e.g.

declare module 'ormconfig.json' {
  import { Connection } from "typeorm";

  const foo: Connection[];
  export = foo;
}

answered Jul 10, 2018 at 9:17

Erik Vullings

5,8502 gold badges31 silver badges26 bronze badges

2 Comments

Arsalan Khalid Over a year ago

Where did you put the above declare module bit, typings.d.ts?

Erik Vullings Over a year ago

@ArsalanKhalid As a separate file e.g. ormconfig.d.ts anywhere in your code should be fine... I normally add them to a utils folder or typings folder if I have many of them.

JGFMK · Accepted Answer · 2017-07-05 14:56:17Z

0

Have you done something like add a SystemJS script in your web page to do module loading - index.html etc. I used https://cdnjs.com/libraries/systemjs and iirc you need https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.14/system.src.js System.JS is the module loader.. Has to be first script imported. And then you need something like this:

    <script
   src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.14/system.src.js "/>
    <script>
       System.config({
         defaultJSExtension:true
       });
      System.import('pathtoscriptwithoutdotjsatend');
   </script>

edited Jul 5, 2017 at 14:56

answered Jul 5, 2017 at 14:49

JGFMK

8,9724 gold badges63 silver badges101 bronze badges

1 Comment

ppulwey Over a year ago

It's a node application. There is no web page. Should have mentioned it ... sorry.

Collectives™ on Stack Overflow

Import JSON file in node application with TypeScript

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Related