Erreur du compilateur Typescript lors de l'importation du fichier json
, Donc le code est simple:
Appels.json
{"SERVER":{
"requests":{
"one":"1"
}
} }
Fichier.ts
import json = require('../static/calls.json');
console.log(json.SERVER);
Le javascript généré est correct et lors de l'exécution du serveur node js, le journal de la console json.Le serveur imprime '{ requests: {one: '1'} }', comme il se doit.
Le compilateur typescript (commonjs) cependant, n'aime pas particulièrement cette situation et lance: "impossible de trouver le module"../statique / appels.json'".
Bien sûr, j'ai essayé d'écrire un .fichier D. ts, comme ceci:
declare module '../static/calls.json'{
var exp:any;
export = exp;
}
Ce alors jette évidemment: "la déclaration du module ambiant ne peut pas spécifier le nom du module relatif".
J'ai aussi essayé différentes variantes, comme:
declare module 'calls.json' {
import * as json from '/private/static/calls.json';
export = json;
}
Puis exigeant:
import json = require('calls.json');
Aucun ne fonctionne correctement et a ses propres petites erreurs de compilateur:)
Je veux utiliser un externe .fichier json parce que j'utilise commonjs serverside et AMD clientside et je veux un seul fichier pour charger les constantes.
6 réponses
Utiliser var au lieu de import.
var json = require('./calls.json');
Vous chargez un fichier JSON, pas un module, donc import ne devrait pas être utilisé est ce cas. Lorsque var est utilisé, require() est traité comme une fonction normale à nouveau.
Si vous utilisez un nœud.définition js, tout devrait juste fonctionner, sinon require devra être défini.
Une autre solution consiste à changer data.json en data.ts et à exporter comme ceci
export default {
"key" : {
...
}
}
Et importer comme vous pouvez vous y attendre:
import { default as data } from './data'
Cela peut - aussi être fait en utilisant import instruction en cas d'utilisation de webpack v2, qui est déjà emballé avec json-chargeur.
Notez que ce n'est pas asynchrone
import data from './data.json';//Note that this is not async
Aussi, dans votre fichier typings.d.ts ajoutez le module Générique suivant pour éviter une erreur typescript en disant: Cannot find module
declare module "*.json" {
const value: any;
export default value;
}
Pour quiconque s'intéresse à async importations, vérifiez cet article par 2uality
TS 2.9 Ajout du support pour les importations JSON bien typées . Il suffit d'ajouter:
{
"compilerOptions": {
"resolveJsonModule": true
}
}
Votre tsconfig.json ou jsconfig.json. Maintenant, les importations telles que:
import json = require('../static/calls.json');
Et
import * as json from '../static/calls.json';
Devrait être résolu et avoir des typages appropriés aussi!
À partir de Typescript 2.9 Vous pouvez importer le fichier JSON en mode natif sans aucun hack/chargeur supplémentaire nécessaire.
L'extrait suivant est copié à partir dudit lien ci-dessus.
...TypeScript est maintenant capable d'importer des fichiers JSON en tant que fichiers d'entrée lors de l'utilisation de la stratégie de nœud pour moduleResolution. Cela signifie que vous pouvez utiliser des fichiers json dans le cadre de leur projet, et ils seront bien typés!
./src/settings.json
{
"dry": false,
"debug":
./src/foo.ts
import settings from "./settings.json";
settings.debug === true; // Okay
settings.dry === 2; // Error! Can't compare a `boolean` and `number`
For Angular 6 it can work with simple HTTP get call as below
Service
//interface, could be Array , object
export interface ResultJSON{
}
//Read JSON file for 3DWide
getJSON() {
return this.http.get(this.filepathUrl);
}
Component :import both service and interface and use as below
resultJSON :ResultJSON;
this
.testService
.getJSON()
.subscribe((data: ResultJSON) => {
this.resultJSON= data;
console.log(this.resultJSON);
});