javascript - para - tipografia html

Error del compilador de mecanografía al importar el archivo json

Question

Entonces el código es simple:

llamadas.json

{"SERVER":{
    "requests":{
      "one":"1"
    }
} }

file.ts

import json = require(''../static/calls.json'');
console.log(json.SERVER);

el javascript generado es correcto y cuando ejecuta el servidor del nodo js, ​​el registro de consola json.SERVER imprime ''{peticiones: {uno:'' 1 ''}}'', como debería.

Sin embargo, el compilador de mecanografiado (commonjs), de alguna manera no le gusta especialmente esta situación y arroja: "No se puede encontrar el módulo ''../static/calls.json''".

Por supuesto, intenté escribir un archivo .d.ts, como este:

declare module ''../static/calls.json''{
    var exp:any;
    export = exp;
}

esto obviamente arroja: "La declaración del módulo ambiental no puede especificar el nombre relativo del módulo".

También probé diferentes variantes, como:

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

y luego requiere:

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

Ninguno funciona correctamente y tiene sus propios pequeños errores de compilación :)

Quiero usar un archivo externo .json porque uso el lado del servidor commonjs y el lado del cliente amd y quiero un solo archivo para cargar constantes.

Answer 1

A partir de Typescript 2.9 puede importar archivos JSON de forma nativa sin necesidad de ningún hack / loader adicional.

El siguiente extracto se copia de dicho enlace anterior.

... TypeScript ahora puede importar archivos JSON como archivos de entrada al usar la estrategia de nodo para moduleResolution. Esto significa que puede usar archivos json como parte de su proyecto, ¡y estarán bien escritos!

./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`

Answer 2

Esto también se puede hacer mediante la declaración de import si se usa webpack v2 que ya está empaquetado con json-loader .

Tenga en cuenta que esto no es asíncrono

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

Además, en su archivo typings.d.ts agregue el siguiente módulo comodín para evitar el error de mecanografía que dice: Cannot find module

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

Para cualquier persona interesada en las importaciones async , consulte este artículo por 2uality

Answer 3

Otra solución es cambiar data.json a data.ts y exportar así

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

e importa como esperarías:

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

Answer 4

TS 2.9 agregó soporte para importaciones json bien escritas . Solo agrega:

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

en su tsconfig.json o jsconfig.json . Ahora importaciones como:

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

y

import * as json from ''../static/calls.json'';

¡Debería resolverse y tener los tipos adecuados también!

Answer 5

Use var lugar de import .

var json = require(''./calls.json'');

Estás cargando un archivo JSON, no un módulo, por lo que la import no debe usarse en este caso. Cuando se usa var , require() se trata nuevamente como una función normal.

Si está utilizando una definición de Node.js, todo debería funcionar, de lo contrario será necesario definir require .

Answer 6

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); 


         });