Importer un fichier json dans TypeScript

J'ai un JSONfichier qui ressemble à ceci:

{

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

J'essaye de l'importer dans un .tsxfichier. Pour cela, j'ai ajouté ceci à la définition de type:

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

Et je l'importe comme ça.

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

Et dans le fichier, j'utilise la couleur primaryMaincomme colors.primaryMain. Cependant, j'obtiens une erreur:

La propriété 'primaryMain' n'existe pas sur le type 'typeof "* .json"

Le formulaire d'importation et la déclaration du module doivent convenir de la forme du module, de ce qu'il exporte.

Lorsque vous écrivez (une pratique sous-optimale pour l'importation de JSON depuis TypeScript 2.9 lors du ciblage de formats de modules compatibles ^{voir note} )

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

Vous déclarez que tous les modules dont le spécificateur se termine par .jsonont une seule exportation nommée default .

Il existe plusieurs façons de consommer correctement un tel module, notamment

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

et

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

et

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

et

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

La première forme est la meilleure et le sucre syntaxique qu'elle exploite est la raison même pour laquelle JavaScript defaultexporte.

Cependant, j'ai mentionné les autres formulaires pour vous donner une idée de ce qui ne va pas. Portez une attention particulière au dernier. requirevous donne un objet représentant le module lui-même et non ses liaisons exportées.

Alors pourquoi l'erreur? Parce que tu as écrit

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

Et pourtant, il n'y a pas d'export nommé primaryMaindéclaré par votre "*.json".

Tout cela suppose que votre chargeur de module fournit le JSON comme defaultexportation comme suggéré par votre déclaration d'origine.

Remarque: depuis TypeScript 2.9, vous pouvez utiliser l' --resolveJsonModuleindicateur du compilateur pour que TypeScript analyse les .jsonfichiers importés et fournisse des informations correctes concernant leur forme, évitant ainsi le besoin d'une déclaration de module générique et validant la présence du fichier. Ceci n'est pas pris en charge pour certains formats de module cible.

Avec TypeScript 2.9. +, Vous pouvez simplement importer des fichiers JSON avec typesafety et intellisense comme ceci:

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

Assurez-vous d'ajouter ces paramètres dans la compilerOptionssection de votre tsconfig.json( documentation ):

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

Notes secondaires:

• Typescript 2.9.0 a un bogue avec cette fonctionnalité JSON, il a été corrigé avec 2.9.2
• L'esModuleInterop n'est nécessaire que pour l'importation par défaut de colorsJson. Si vous laissez la valeur false, vous devez l'importer avecimport * as colorsJson from '../colors.json'

Il est facile d'utiliser la version 2.9+ dactylographiée. Ainsi, vous pouvez facilement importer des fichiers JSON comme @kentor le décrit .

Mais si vous devez utiliser des versions plus anciennes:

Vous pouvez accéder aux fichiers JSON de manière plus TypeScript. Tout d'abord, assurez-vous que votre nouvel typings.d.tsemplacement est le même que celui de la includepropriété dans votre tsconfig.jsonfichier.

Si vous n'avez pas de propriété include dans votre tsconfig.jsonfichier. Ensuite, la structure de votre dossier devrait être comme ça:

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

Mais si vous avez une includepropriété dans votre tsconfig.json:

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

Ensuite, vous typings.d.tsdevriez être dans le srcrépertoire comme décrit dans la includepropriété

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

Comme dans la plupart des réponses, vous pouvez définir une déclaration globale pour tous vos fichiers JSON.

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

mais je préfère une version plus typée de ceci. Par exemple, disons que vous avez un fichier de configuration config.jsoncomme celui-ci:

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

Ensuite, nous pouvons déclarer un type spécifique pour cela:

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

Il est facile d'importer dans vos fichiers dactylographiés:

import * as Config from 'config.json';

export class SomeClass {
    public someMethod: void {
        console.log(Config.address);
        console.log(Config.port);
    }
}

Mais en phase de compilation, vous devez copier manuellement les fichiers JSON dans votre dossier dist. Je viens d'ajouter une propriété de script à ma package.jsonconfiguration:

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

Dans votre fichier de définition TS, par exemple typings.d.ts`, vous pouvez ajouter cette ligne:

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

Ajoutez ensuite ceci dans votre fichier dactylographié (.ts): -

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

Une autre façon d'aller

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

C'est ainsi que vous pouvez toujours définir le type json que vous voulez et ne pas avoir à utiliser de joker.

Par exemple, le type personnalisé json.

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

Souvent, dans les applications Node.js, un .json est nécessaire. Avec TypeScript 2.9, --resolveJsonModule permet d'importer, d'extraire des types et de générer des fichiers .json.

Exemple #

// 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
}