leer - read json angular 5

Importando archivo json en TypeScript

Question

Tengo un archivo JSON que se parece a lo siguiente:

{
"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"
}

Estoy tratando de importarlo en un archivo .tsx . Para esto agregué esto a la definición de tipo:

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

Y lo estoy importando así.

import colors = require(''../colors.json'')

Y en el archivo, uso el color primaryMain como colors.primaryMain . Sin embargo Property ''primaryMain'' does not exist on type ''typeof "*.json" un error: la Property ''primaryMain'' does not exist on type ''typeof "*.json"

¿Qué estoy haciendo mal?

Answer 1

Con TypeScript 2.9. + Puede simplemente importar archivos JSON con seguridad de tipos e inteligencias como esta:

import colorsJson from ''../colors.json'';
console.log(colorsJson.primaryBright);

Asegúrese de agregar estas configuraciones en la sección compilerOptions de su tsconfig.json ( documentation ):

"resolveJsonModule": true,
"esModuleInterop": true,

Notas al margen:

• Typescript 2.9.0 tiene un error con esta característica JSON, creo que se corrigió con 2.9.1 o 2.9.2
• El esModuleInterop solo es necesario para la importación predeterminada de colorsJson. Si lo deja configurado en falso, debe importarlo con import * as colorsJson from ''../colors.json''

Answer 2

El formulario de importación y la declaración del módulo deben acordar la forma del módulo, lo que exporta.

Cuando escribe (una mala práctica para archivos JSON desde TypeScript 2.9 ^{vea la nota} )

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

Usted está indicando que todos los módulos que tienen un especificador que termina en .json tienen una única exportación denominada por default que es de tipo any .

Hay varias formas en que puede consumir un módulo de este tipo, incluyendo

import a from "a.json";
a.primaryMain

y

import * as a from "a.json";
a.default.primaryMain

y

import {default as a} from "a.json";
a.primaryMain

y

import a = require("a.json");
a.default.primaryMain

La primera forma es la mejor y el azúcar sintáctico que aprovecha es la razón por la cual JavaScript tiene exportaciones default .

Sin embargo, mencioné las otras formas para darle una pista sobre lo que está mal. Presta especial atención al último. require le proporciona un objeto que representa el módulo en sí y no sus enlaces exportados.

Entonces, ¿por qué el error? Porque escribiste

import a = require("a.json");
a.primaryMain

Y, sin embargo, no hay una exportación llamada primaryMain declarada por su "*.json" .

Todo esto supone que su cargador de módulos proporciona el JSON como la exportación default como lo sugiere su declaración original.

Nota: Desde TypeScript 2.9, puede usar el --resolveJsonModule compilador --resolveJsonModule para que TypeScript analice los archivos .json importados y proporcione la información correcta sobre su forma, evitando la necesidad de una declaración de módulo comodín y validando la presencia del archivo.

Answer 3

Es fácil de usar versión mecanografiada 2.9+. Por lo tanto, puede importar fácilmente archivos JSON como @kentor se describe .

Pero si necesitas usar versiones anteriores:

Puede acceder a los archivos JSON de forma más TypeScript. Primero, asegúrese de que su nueva ubicación typings.d.ts sea ​​la misma que la propiedad include en su archivo tsconfig.json .

Si no tiene una propiedad de inclusión en su archivo tsconfig.json . Entonces tu estructura de carpetas debería ser así:

- app.ts
+ node_modules/
- package.json
- tsconfig.json
- typings.d.ts

Pero si tiene una propiedad de include en su tsconfig.json :

{
"compilerOptions": {
},
"exclude" : [
"node_modules",
"**/*spec.ts"
], "include" : [
"src/**/*"
]
}

Entonces su typings.d.ts debería estar en el directorio src como se describe en la propiedad include

+ node_modules/
- package.json
- tsconfig.json
- src/
- app.ts
- typings.d.ts

Como en muchas de las respuestas, puede definir una declaración global para todos sus archivos JSON.

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

Pero prefiero una versión más mecanografiada de esto. Por ejemplo, digamos que tiene el archivo de configuración config.json así:

{
"address": "127.0.0.1",
"port" : 8080
}

Entonces podemos declarar un tipo específico para ello:

declare module ''config.json'' {
export const address: string;
export const port: number;
}

Es fácil de importar en tus archivos mecanografiados:

import * as Config from ''config.json'';
export class SomeClass {
public someMethod: void {
console.log(Config.address);
console.log(Config.port);
}
}

Pero en la fase de compilación, debe copiar los archivos JSON a su carpeta dist manualmente. Acabo de agregar una propiedad de script a mi configuración package.json :

{
"name" : "some project",
"scripts": {
"build": "rm -rf dist && tsc && cp src/config.json dist/"
}
}

Answer 4

Otra manera de ir

const data: {[key: string]: any} = require(''./data.json'');

Esto es lo que aún puede definir el tipo de json es lo que desea y no tiene que usar comodines.

Por ejemplo, tipo personalizado json.

interface User {
firstName: string;
lastName: string;
birthday: Date;
}
const user: User = require(''./user.json'');

Answer 5

En su archivo de definición de TS, por ejemplo, typings.d.ts`, puede agregar esta línea:

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

Luego agregue esto en su archivo mecanografiado (.ts):

import * as data from ''./colors.json'';
const word = (<any>data).name;