leer - read json angular 5
Importando archivo json en TypeScript (5)
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?
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''
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.
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/"
}
}
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'');
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;