Cómo importar json en TypeScript

En ES6/ES2015, puede importar un archivo json en su código. Por ejemplo,

Dado que tiene este archivo example.json `:

{"nombre": "prueba"}

Podrías importarlo en ES6/ES2015 así.

// ES6/ES2015// aplicación.js

importar * como datos de './example.json';

const palabra = datos.nombre;

consola.log(palabra); // salida 'prueba'

En Typescript , sin embargo, el mismo código arrojará un error:

No se puede encontrar el módulo 'example.json'

[ACTUALIZAR] Solución: Typescript 2.9 admite la importación de JSON.

Si está utilizando Typescript versión 2.9, no necesita seguir la solución 2. Así es como puede hacerlo:

En su archivo `tsconfig.json`, en las opciones del compilador, agregue estas dos líneas:

{"opciones del compilador": {"resolveJsonModule": verdadero,"esModuleInterop": verdadero}}

Entonces puedes importar json así:

// Texto mecanografiado// app.ts

importar datos de './example.json';

const palabra = (<cualquier>dato).nombre;

consola.log(palabra); // salida 'prueba'

¡Pan comido!

Solución: usar el nombre del módulo comodín

En Typescript versión 2+ , podemos usar caracteres comodín en el nombre del módulo . En su archivo de definición de TS, por ejemplo, typings.d.ts `, puede agregar esta línea:

declarar módulo "*.json" {valor constante: cualquiera; exportar valor predeterminado;}

Entonces, ¡tu código funcionará a las mil maravillas!

// Texto mecanografiado// app.ts

importar * como datos de './example.json';

const palabra = (<cualquier>dato).nombre;

consola.log(palabra); // salida 'prueba'

Código de muestra aquí: https://github.com/chybie/ts-json

Esta solución también funciona bien con el proyecto Angular.

Hacker Noon es como los hackers empiezan sus tardes. Somos parte de la familia @AMI . Ahora estamos aceptando presentaciones y estamos felices de discutir oportunidades de publicidad y patrocinio .

Para obtener más información, lea nuestra página de información , envíenos un mensaje/me gusta en Facebook o simplemente envíe un tweet/DM a @HackerNoon.

Si disfrutó de esta historia, le recomendamos que lea nuestras historias sobre tecnología más recientes y las historias sobre tecnología de moda. Hasta la próxima, ¡no des por sentadas las realidades del mundo!