web-dev-qa-db-fra.com

Erreur du compilateur dactylographiée lors de l'importation du fichier json

Donc le code est simple:

calls.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 de noeud js, le journal de la console json.SERVER imprime '{request: {one: {1:' 1 '}}', comme il se doit.

Cependant, le compilateur TypeScript (commonjs) n'aime pas particulièrement cette situation et lance: "Impossible de trouver le module '../static/calls.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;
}

ceci lance évidemment: "La déclaration de module ambiant ne peut pas spécifier le nom de module relatif".

J'ai aussi essayé différentes variantes, comme:

declare module 'calls.json' {
    import * as json from '/private/static/calls.json';
    export = json;
}

et exigeant ensuite:

import json = require('calls.json');

Aucun ne fonctionne correctement et a ses propres petites erreurs de compilation :)

Je souhaite utiliser un fichier .json externe car j'utilise commonjs serverside et AMD clientside et je souhaite un fichier unique pour le chargement de constantes.

javascriptjsonnode.jstypescriptcommonjs
51
Ken

Utilisez 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é dans ce cas. Lorsque var est utilisé, require() est à nouveau traité comme une fonction normale.

Si vous utilisez une définition de Node.js, tout devrait fonctionner, sinon require devra être défini.

77
thoughtrepo

Une autre solution consiste à changer data.json à data.ts et exporter comme ça

export default {
  "key" : {
    ...
  }
}

et importez comme vous le souhaitez:

import { default as data } from './data'
24
itiskj

Cela peut également être effectué à l'aide de l'instruction import si vous utilisez webpack v2 qui est déjà fourni avec - json-loader .

Notez que ce n'est pas asynchrone

import data from './data.json';//Note that this is not async

En outre, dans votre fichier typings.d.ts, Ajoutez le texte suivant module générique pour éviter toute erreur TypeScript disant: Cannot find module

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

Pour ceux qui sont intéressés par async importations, cochez la case cet article par 2uality

20
sabithpocker

TS 2.9 ajout du support pour les importations json bien typées . Il suffit d'ajouter:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

dans 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!

16
Matt Bierner

À compter de TypeScript 2.9 , vous pouvez importer un fichier JSON en mode natif sans qu'aucun autre piratage/chargeur ne soit nécessaire.

L'extrait suivant est copié à partir du lien ci-dessus.

... TypeScript peut désormais 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`
2
doomleika