ts-json-loader

This package is not ready for use

Create TypeScript typings for JSON files loaded in webpack for use with ts-loader.

Installation

npm install ts-json-loader

You will also need to install TypeScript and ts-loader if you have not already.

npm install typescript ts-loader

Example

The following example webpack configuration provides typings for modules ending with .json.

Note that ts-json-loader comes after ts-loader, and that ts-loader must be configured with usePreviousLoaderGeneratedFiles: true.

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: { usePreviousLoaderGeneratedFiles: true }
          },
          {
            loader: 'ts-json-loader',
            options: { test: /\.json$/ }
          }
        ]
      }
    ]
  },
  ...
};

To make the typings generated by ts-json-loader available to other tools (f.ex. tsc) they can be saved as .d.ts files:

{
  loader: 'ts-json-loader',
  options: { test: /\.json$/, save: true }
}

With the configution above, and given a file object.json:

{
    "empty": null,
    "valid": true,
    "not-valid": false,
    "count": 42,
    "name": "Aragorn",
    "array": [null, true, false, 43, "Frodo"]
}

... typings like the following will be generated by ts-json-loader and be available to ts-loader:

declare const __jsonRoot: {
    readonly empty: null;
    readonly valid: boolean;
    readonly 'not-valid': boolean;
    readonly count: number;
    readonly name: string;
    readonly array: [
        null,
        boolean,
        boolean,
        number,
        string
    ];
}
export = __jsonRoot;

If the option save is true these typings will also be saved to file object.json.d.ts.

It is now possible to import object.json in TypeScript:

import * as obj from './object.json';

console.log(obj.name);

Named imports can also be used:

import { name, count } from './object.json';

console.log(name, count);

Options

test (RegExp) (default=/.json$/)

Specifies which modules to generate typings for.

If json-loader is used (webpack 2 automatically loads .json files), this option should match the test option for json-loader.

save (boolean) (default=false)

Specifies whether to save the generated typings to disk. If true, the typings will be saved to a file with ".d.ts" appended to the file path of the imported module. So the typings for object.json will be saved in file object.json.d.ts.

This makes the typings available to other tools, f.ex. tsc.

compiler (string) (default='typescript')

Allows use of TypeScript compilers other than the official one. Should be set to the NPM name of the compiler, eg ntypescript.

Developement

First, install dependent packages:

npm install

To build the project:

npm run build

Testing

At the moment there are two simple test projects:

• ./test/tests/basic
• ./test/tests/save-dts-files

To run webpack on these test projects:

npm test