Importowanie pliku JSON w TypeScript

Mam JSONplik, który wygląda następująco:

{

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

Próbuję zaimportować go do .tsxpliku. W tym celu dodałem to do definicji typu:

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

Importuję to w ten sposób.

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

W pliku używam koloru primaryMainjako colors.primaryMain. Jednak pojawia się błąd:

Właściwość „primaryMain” nie istnieje w typie „typeof„ * .json ”

Formularz importu i deklaracja modułu muszą być zgodne co do kształtu modułu, co eksportuje.

Podczas pisania (nieoptymalna praktyka importowania JSON od TypeScript 2.9 w przypadku kierowania na zgodne formaty modułów, ^{patrz uwaga} )

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

Twierdzisz, że wszystkie moduły, których specyfikator kończy się na, .jsonmają jeden nazwany eksport default.

Istnieje kilka sposobów prawidłowego wykorzystania takiego modułu, w tym

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

i

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

i

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

i

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

Pierwsza forma jest najlepsza, a cukier składniowy, z którego korzysta, jest przyczyną defaulteksportu JavaScript .

Jednak wspomniałem o innych formularzach, aby dać ci wskazówkę, co się dzieje. Zwróć szczególną uwagę na ostatnią. requiredaje obiekt reprezentujący sam moduł, a nie jego wyeksportowane powiązania.

Skąd więc błąd? Ponieważ napisałeś

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

A jednak nie ma żadnego primaryMainzadeklarowanego eksportu"*.json" .

Wszystko to zakłada, że ​​moduł ładujący moduł dostarcza JSON jako defaulteksport, zgodnie z sugestią zawartą w pierwotnej deklaracji.

Uwaga: Począwszy od TypeScript 2.9, możesz użyć --resolveJsonModuleflagi kompilatora, aby TypeScript analizował importowane .jsonpliki i dostarczał poprawne informacje dotyczące ich kształtu, eliminując potrzebę deklaracji modułu wieloznacznego i weryfikując obecność pliku. Nie jest to obsługiwane w przypadku niektórych formatów modułów docelowych.

Dzięki TypeScript 2.9. + Możesz po prostu importować pliki JSON z zabezpieczeniami typów i inteligencją w następujący sposób:

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

Pamiętaj, aby dodać te ustawienia w compilerOptionssekcji swojej tsconfig.json( dokumentacji ):

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

Uwagi dodatkowe:

• Typescript 2.9.0 zawiera błąd związany z tą funkcją JSON, został on naprawiony w wersji 2.9.2
• EsModuleInterop jest potrzebny tylko do domyślnego importu colorsJson. Jeśli pozostawisz to ustawione na false, musisz zaimportować je zimport * as colorsJson from '../colors.json'

Jest łatwy w użyciu na maszynie w wersji 2.9+. Możesz więc łatwo importować pliki JSON zgodnie z opisem @kentor .

Ale jeśli potrzebujesz użyć starszych wersji:

Możesz uzyskać dostęp do plików JSON w sposób bardziej TypeScript. Najpierw upewnij się, że nowa typings.d.tslokalizacja jest taka sama, jak w przypadku includewłaściwości w tsconfig.jsonpliku.

Jeśli nie masz właściwości include w swoim tsconfig.jsonpliku. Wtedy struktura folderów powinna wyglądać następująco:

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

Ale jeśli masz includenieruchomość w swoim tsconfig.json:

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

Następnie typings.d.tspowinieneś znajdować się w srckatalogu zgodnie z opisem we includewłaściwości

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

Jak w wielu odpowiedziach, możesz zdefiniować globalną deklarację dla wszystkich swoich plików JSON.

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

ale wolę bardziej wpisaną wersję tego. Na przykład, powiedzmy, że masz config.jsontaki plik konfiguracyjny :

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

Następnie możemy zadeklarować dla niego określony typ:

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

Łatwo jest zaimportować do plików maszynopisu:

import * as Config from 'config.json';

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

Jednak w fazie kompilacji należy ręcznie skopiować pliki JSON do folderu dist. Po prostu dodaję właściwość skryptu do mojej package.jsonkonfiguracji:

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

W swoim pliku TS Definition, np. Typings.d.ts`, możesz dodać tę linię:

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

Następnie dodaj to w swoim pliku maszynopisu (.ts): -

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

Inny sposób

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

To było nadal możesz zdefiniować typ json, który chcesz i nie musisz używać symboli wieloznacznych.

Na przykład niestandardowy typ json.

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

Często w aplikacjach Node.js wymagany jest plik .json. W przypadku TypeScript 2.9 --resolveJsonModule umożliwia importowanie, wyodrębnianie typów i generowanie plików .json.

Przykład #

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

Włącz "resolveJsonModule": truew tsconfig.jsonpliku i zaimplementuj jak poniżej kod, to działa dla mnie:

const config = require('./config.json');