Importovanie súboru JSON v TypeScripte

Mám súbor JSON, ktorý vyzerá nasledovne:

{

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

Snažím sa to importovať do súboru .tsx. Na toto som do definície typu pridal toto:

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

A importujem to takto.

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

A v súbore používam farbu primaryMain ako colors.primaryMain. Avšak dostanem chybu:

Vlastnosť 'primaryMain' neexistuje na type 'typeof "*.json"'

Odpoveď č. 1

S TypeScript 2.9.+ môžete jednoducho importovať JSON súbory s výhodami ako typová bezpečnosť a IntelliSense týmto spôsobom:

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

Uistite sa, že tieto nastavenia pridáte do sekcie compilerOptions vo vašom súbore tsconfig.json (dokumentácia):

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

Bočné poznámky:

  • Typescript 2.9.0 má chybu s touto funkciou JSON, bola opravená vo verzii 2.9.2
  • Možnosť esModuleInterop je potrebná iba pre predvolený import colorsJson. Ak ju necháte nastavenú na false, musíte ho importovať pomocou import * as colorsJson from '../colors.json'

Odpoveď č. 2

Importný formulár a deklarácia modulu musia súhlasiť, pokiaľ ide o tvar modulu, o tom, čo exportuje.

Keď píšete (podoptimálna prax pri importovaní JSON od TypeScript 2.9 pri cielení na kompatibilné formáty modulovpozri poznámku)

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

Tvrdíte, že všetky moduly, ktoré majú špecifikátor končiaci na .json, majú jeden export nazvaný default.

Existuje niekoľko spôsobov, ako môžete takýto modul správne používať vrátane

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

a

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

a

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

a

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

Prvá forma je tá najlepšia a syntaktický cukor, ktorý využíva, je práve dôvod, prečo má JavaScript default exporty.

Avšak spomenul som aj ostatné formy, aby som vám naznačil, čo sa pokazilo. Venovať osobitnú pozornosť poslednej. require vám poskytuje objekt predstavujúci samotný modul a nie jeho exportované väzby.

Tak prečo chyba? Pretože si napísal

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

A predsa neexistuje žiadny export s názvom primaryMain deklarovaný vo vašom "*.json".

Všetko toto predpokladá, že váš modulový načítač poskytuje JSON ako default export, ako sa navrhuje vo vašom pôvodnom vyhlásení.

Poznámka: Od verzie TypeScript 2.9 môžete použiť prepínač kompilátora --resolveJsonModule, aby TypeScript analyzoval importované súbory .json a poskytol správne informácie o ich štruktúre, čím odpadá potreba deklarácie modulov so zástupným znakom a kontrola prítomnosti súboru. Toto nie je podporované pre určité cieľové formáty modulov.

Odpoveď č. 3

Tu je návod, ako naimportovať súbor json počas behu programu

import fs from 'fs'
var dataArray = JSON.parse(fs.readFileSync('data.json', 'utf-8'))

Týmto spôsobom sa vyhnete problémom so spomalením tsc alebo nedostatkom pamäte pri importe veľkých súborov, čo sa môže stať pri používaní resolveJsonModule.

Odpoveď č. 4

V mojom prípade som musel zmeniť tsconfig.node.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true
  },
  "include": [..., "colors.json"]
}

A importovať takto:

import * as colors from './colors.json'

Alebo takto:

import colors from './colors.json'

s "esModuleInterop": true

Odpoveď č. 5

Je ľahké používať TypeScript verziu 2.9 a vyššiu. Takže môžete jednoducho importovať JSON súbory, ako popísal @kentor.

Ale ak potrebujete použiť staršie verzie:

K súborom JSON môžete pristupovať viac spôsobom typickým pre TypeScript. Najprv sa uistite, že nová lokalita súboru typings.d.ts je rovnaká ako u vlastnosti include vo vašom súbore tsconfig.json.

Ak vo vašom súbore tsconfig.json nemáte vlastnosť include, vaša štruktúra priečinkov by mala vyzerať takto:

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

Ale ak máte vlastnosť include vo vašom tsconfig.json:

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

Potom by mal byť váš typings.d.ts v adresári src, ako je popísané v vlastnosti include

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

Ako v mnohých odpovediach, môžete definovať globálne vyhlásenie pre všetky vaše JSON súbory.

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

ale uprednostňujem viac typovanú verziu tohto. Napríklad, povedzme, že máte konfiguračný súbor config.json takto:

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

Potom môžeme pre to vyhlásiť konkrétny typ:

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

Je ľahké importovať do vašich súborov TypeScript:

import * as Config from 'config.json';

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

Ale počas fázy kompilácie by ste mali súbory JSON skopírovať do svojho priečinka dist ručne. Ja len pridám vlastnosť script do mojej konfigurácie package.json:

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

Odpoveď č. 6

V Angular (TypeScript) aplikácii som potreboval zahrnúť súbor .json do môjho environment.ts. Aby som to mohol urobiť, musel som nastaviť dve možnosti v tsconfig:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

Potom som mohol importovať svoj súbor json do environment.ts:

import { default as someObjectName } from "../some-json-file.json";

Odpoveď č. 7

Často sú v aplikáciách Node.js potrebné súbory .json. S TypeScriptom 2.9 umožňuje --resolveJsonModule importovanie, získavanie typov a generovanie súborov .json.

Príklad #

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

od: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html

Odpoveď č. 8

Mali by ste pridať

"resolveJsonModule": true

ako súčasť compilerOptions do tsconfig.json.

Odpoveď č. 9

JSON súbor môžete importovať bez úpravy tsconfig tak, že explicitne určíte, že importujete JSON

import mydata  from './mydataonfile.json' assert { type: "json" };

Viem, že toto úplne nezodpovedá otázku, ale mnoho ľudí sem prichádza, aby zistilo, ako načítať JSON priamo zo súboru.

Odpoveď č. 10

TypeScript 5.3 zaviedol Import Attributes, predtým známe ako Import Assertions, ktoré môžu poskytovať informácie o očakávanom formáte importovaného modulu počas behu programu.

Importované atributy zabezpečujú, že modul je importovaný v správnom formáte. To znamená, že súbor .json, ktorý skutočne obsahuje spustiteľný JavaScriptový kód, je určite interpretovaný ako JSON.

import colors from "./colors.json" with { type: "json" };

Súvisiace články