(Typescript) Import json into Angular 4 project

Question

I have a json file of translations that I want to use in my angular 4 project. The file is also used in php which is why it needs to be stored as json rather than as a js module.

It has this structure

export interface IDictionary {
    amsterdamCenter: number[];
    amsterdamBounds: Array<number[]>;
    prices: Price[];
    cuisines: Object;
    areas: Object;
}

Following https://hackernoon.com/import-json-into-typescript-8d465beded79 I have changed typings.d.ts to read

/* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
  id: string;
}

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

Now I have an error with

import * as dictionary from './dictionary.json';

export const Dictionary: IDictionary = dictionary;

[ts] Type 'typeof ".json"' is not assignable to type 'IDictionary'. Property 'amsterdamCenter' is missing in type 'typeof ".json"'.

However

export const Dictionary: any = dictionary;

does work. I'm hoping there is an incantation of TS that will permit me to import typescript using my interfaces

Are you using Typescript 2+ version? did you add the module declaration in the type definition file? — Niladri
– Niladri, Commented May 20, 2018 at 7:01
In linked example there's "casting" to any, so: export const Dictionary: IDictionary = dictionary as any; — Aleksey L.
– Aleksey L., Commented May 20, 2018 at 8:09
@AlekseyL. yes I think I can see that that is the problem. By typings.d.ts seems very low level file ad so I did not want to put IDictionary there — Simon H
– Simon H, Commented May 20, 2018 at 8:10
I will check later, but I think you can change import to import dictionary from './dictionary.json'; and no additional casting will be needed (as it is already defined as any) — Aleksey L.
– Aleksey L., Commented May 20, 2018 at 8:18

Senthil · Accepted Answer · 2018-10-23 04:59:50Z

2

@simon-h try this code. Its working fine

import * as dictionary from './dictionary.json';

export const Dictionary: IDictionary = (<any>dictionary);

(or)

export const Dictionary: any = (<any>dictionary);

(or)

export const Dictionary: any = dictionary as any;

answered Oct 23, 2018 at 4:59

Senthil

7672 gold badges7 silver badges25 bronze badges

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

Comments

Jhonycage · Accepted Answer · 2019-11-19 16:46:39Z

1

One thing you could do is parse the Json file like :

import * as myJson from './my-json.json';

getMyJson(): Array<any> {
 return JSON.parse(JSON.stringify(myJson))
}

you can type the response to a specific model/class if you wish.

EDIT: Actually just import and assign, copy if you wish:

import * as settingsMenu from './settings-menu.json';
const array = settingsMenu;
// OPTIONAL: copy object
const menu: Array<BdbMap> = new Array();
Object.assign(menu, array);

edited Nov 19, 2019 at 16:46

answered Sep 27, 2018 at 20:05

Jhonycage

8794 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

(Typescript) Import json into Angular 4 project

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related