I have a JSON
file that looks like following:
{
"primaryBright": "#2DC6FB",
"primaryMain": "#05B4F0",
"primaryDarker": "#04A1D7",
"primaryDarkest": "#048FBE",
"secondaryBright": "#4CD2C0",
"secondaryMain": "#00BFA5",
"secondaryDarker": "#009884",
"secondaryDarkest": "#007F6E",
"tertiaryMain": "#FA555A",
"tertiaryDarker": "#F93C42",
"tertiaryDarkest": "#F9232A",
"darkGrey": "#333333",
"lightGrey": "#777777"
}
I'm trying to import it into a .tsx
file. For this I added this to the type definition:
declare module "*.json" {
const value: any;
export default value;
}
And I'm importing it like this.
import colors = require('../colors.json')
And in the file, I use the color primaryMain
as colors.primaryMain
. However I get an error:
Property 'primaryMain' does not exist on type 'typeof "*.json"
This question is related to
json
typescript
In your TS Definition file, e.g. typings.d.ts`, you can add this line:
declare module "*.json" {
const value: any;
export default value;
}
Then add this in your typescript(.ts) file:-
import * as data from './colors.json';
const word = (<any>data).name;
Often in Node.js applications a .json is needed. With TypeScript 2.9, --resolveJsonModule allows for importing, extracting types from and generating .json files.
Example #
// tsconfig.json_x000D_
_x000D_
{_x000D_
"compilerOptions": {_x000D_
"module": "commonjs",_x000D_
"resolveJsonModule": true,_x000D_
"esModuleInterop": true_x000D_
}_x000D_
}_x000D_
_x000D_
// .ts_x000D_
_x000D_
import settings from "./settings.json";_x000D_
_x000D_
settings.debug === true; // OK_x000D_
settings.dry === 2; // Error: Operator '===' cannot be applied boolean and number_x000D_
_x000D_
_x000D_
// settings.json_x000D_
_x000D_
{_x000D_
"repo": "TypeScript",_x000D_
"dry": false,_x000D_
"debug": false_x000D_
}
_x000D_
It's easy to use typescript version 2.9+. So you can easily import JSON files as @kentor decribed.
But if you need to use older versions:
You can access JSON files in more TypeScript way. First, make sure your new typings.d.ts
location is the same as with the include
property in your tsconfig.json
file.
If you don't have an include property in your tsconfig.json
file. Then your folder structure should be like that:
- app.ts
+ node_modules/
- package.json
- tsconfig.json
- typings.d.ts
But if you have an include
property in your tsconfig.json
:
{
"compilerOptions": {
},
"exclude" : [
"node_modules",
"**/*spec.ts"
], "include" : [
"src/**/*"
]
}
Then your typings.d.ts
should be in the src
directory as described in include
property
+ node_modules/
- package.json
- tsconfig.json
- src/
- app.ts
- typings.d.ts
As In many of the response, You can define a global declaration for all your JSON files.
declare module '*.json' {
const value: any;
export default value;
}
but I prefer a more typed version of this. For instance, let's say you have configuration file config.json
like that:
{
"address": "127.0.0.1",
"port" : 8080
}
Then we can declare a specific type for it:
declare module 'config.json' {
export const address: string;
export const port: number;
}
It's easy to import in your typescript files:
import * as Config from 'config.json';
export class SomeClass {
public someMethod: void {
console.log(Config.address);
console.log(Config.port);
}
}
But in compilation phase, you should copy JSON files to your dist folder manually. I just add a script property to my package.json
configuration:
{
"name" : "some project",
"scripts": {
"build": "rm -rf dist && tsc && cp src/config.json dist/"
}
}
Enable "resolveJsonModule": true
in tsconfig.json
file and implement as below code, it's work for me:
const config = require('./config.json');
With TypeScript 2.9.+ you can simply import JSON files with typesafety and intellisense like this:
import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);
Make sure to add these settings in the compilerOptions
section of your tsconfig.json
(documentation):
"resolveJsonModule": true,
"esModuleInterop": true,
Side notes:
import * as colorsJson from '../colors.json'
Another way to go
const data: {[key: string]: any} = require('./data.json');
This was you still can define json type is you want and don't have to use wildcard.
For example, custom type json.
interface User {
firstName: string;
lastName: string;
birthday: Date;
}
const user: User = require('./user.json');
Source: Stackoverflow.com