CODEWITHSUNDEEP
typescripttypescript-typings
ppulwey
ppulwey

Reputation: 318

Import JSON file in node application with TypeScript

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!

Upvotes: 7

Views: 15476

Answers (3)

Erik Vullings
Erik Vullings

Reputation: 5770

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;
}

Upvotes: 1

tony
tony

Reputation: 1326

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

Upvotes: 11

JGFMK
JGFMK

Reputation: 8904

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>

Upvotes: 0

Related Questions