Importar archivo json en TypeScript

Tengo un JSONarchivo 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 a un .tsxarchivo. 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 primaryMaincomo colors.primaryMain. Sin embargo me sale un error:

La propiedad 'primaryMain' no existe en el tipo 'typeof "* .json"

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

Cuando escribe (una práctica subóptima para importar JSON desde TypeScript 2.9 cuando apunta a formatos de módulos compatibles, ^{vea la nota} )

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

Está declarando que todos los módulos que tienen un especificador que termina en .jsontienen una única exportación denominada default .

Hay varias formas en que puede consumir correctamente un módulo como

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 que JavaScript tiene default exporta.

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

Entonces, ¿por qué el error? Porque tu escribiste

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

Y sin embargo, no hay una exportación nombrada primaryMaindeclarada por su"*.json" .

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

Nota: desde TypeScript 2.9, puede usar el --resolveJsonModuleindicador del compilador para que TypeScript analice los .jsonarchivos importados y proporcione información correcta sobre su forma, evitando la necesidad de una declaración de módulo comodín y validando la presencia del archivo. Esto no es compatible con ciertos formatos de módulos de destino.

Con TypeScript 2.9. + Simplemente puede importar archivos JSON con typesafety e intellisense como este:

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

Asegúrese de agregar esta configuración en la compilerOptionssección de su tsconfig.json( documentación ):

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

Notas al margen:

• Typecript 2.9.0 tiene un error con esta función JSON, se corrigió con 2.9.2
• EsModuleInterop solo es necesario para la importación predeterminada de colorsJson. Si lo deja en falso, debe importarlo conimport * as colorsJson from '../colors.json'

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

Pero si necesita usar versiones anteriores:

Puede acceder a los archivos JSON de manera más TypeScript. Primero, asegúrese de que su nueva typings.d.tsubicación sea la misma que con la includepropiedad en su tsconfig.jsonarchivo.

Si no tiene una propiedad de inclusión en su tsconfig.jsonarchivo. Entonces la estructura de su carpeta debería ser así:

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

Pero si tiene una includepropiedad en su tsconfig.json:

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

Entonces typings.d.tsdebería estar en el srcdirectorio como se describe en la includepropiedad

+ 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 tipada de esto. Por ejemplo, supongamos que tiene un archivo de configuración config.jsoncomo ese:

{
    "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 importar en sus archivos de mecanografiado:

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. Solo agrego una propiedad de script a mi package.jsonconfiguración:

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

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 de mecanografiado (.ts):

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

Otra forma de ir

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

Esto todavía puede definir el tipo json si lo 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');

A menudo, en las aplicaciones Node.js se necesita un .json. Con TypeScript 2.9, --resolveJsonModule permite importar, extraer tipos y generar archivos .json.

Ejemplo #

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

// .ts

import settings from "./settings.json";

settings.debug === true;  // OK
settings.dry === 2;  // Error: Operator '===' cannot be applied boolean and number


// settings.json

{
    "repo": "TypeScript",
    "dry": false,
    "debug": false
}