Імпорт файлу json у TypeScript

У мене є JSONфайл, який виглядає так:

{

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

Я намагаюся імпортувати його у .tsxфайл. Для цього я додав це до визначення типу:

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

І я імпортую це так.

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

І у файлі я використовую колір primaryMainяк colors.primaryMain. Однак я отримую помилку:

Властивість 'PrimaryMain' не існує для типу 'typeof "* .json"

Форма імпорту та декларація модуля повинні узгоджувати форму модуля, про те, що він експортує.

Коли ви пишете (субоптимальна практика імпорту JSON з TypeScript 2.9 при націленні на сумісні формати модулів, ^{див. Примітку} )

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

Ви стверджуєте , що всі модулі , які мають специфікатор , який закінчується .jsonє один експорт по імені default .

Існує кілька способів правильно споживати такий модуль, в тому числі

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

і

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

і

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

і

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

Перша форма є найкращою, а синтаксичний цукор, який вона використовує, є тією самою причиною, коли JavaScript defaultекспортує.

Однак я згадав інші форми, щоб дати вам підказку про те, що відбувається не так. Зверніть особливу увагу на останній. requireдає об’єкт, що представляє сам модуль, а не його експортовані прив’язки.

То чому помилка? Бо ти писав

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

І все ж не існує жодного експорту, названого primaryMainвашим "*.json".

Все це передбачає, що ваш завантажувач модулів надає JSON як defaultекспорт, як це запропоновано вашою оригінальною декларацією.

Примітка. Оскільки TypeScript 2.9, ви можете використовувати --resolveJsonModuleпрапор компілятора, щоб TypeScript проаналізував імпортовані .jsonфайли та надав правильну інформацію щодо їх форми, що заперечує необхідність декларації модуля підстановки та підтверджує наявність файлу. Це не підтримується для певних форматів цільового модуля.

З TypeScript 2.9. + Ви можете просто імпортувати файли JSON з безпекою та інтелігенцією типу:

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

Не забудьте додати ці налаштування в compilerOptionsрозділ tsconfig.json( документація ):

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

Бічні нотатки:

• Typescript 2.9.0 має помилку з цією функцією JSON, вона була виправлена ​​з 2.9.2
• EsModuleInterop необхідний лише для імпорту кольорів за замовчуванням. Якщо ви встановите значення false, тоді вам потрібно імпортувати йогоimport * as colorsJson from '../colors.json'

Використовувати машинопис версії 2.9 і новішої версії просто. Таким чином, ви можете легко імпортувати файли JSON у порядку, визначеному @kentor .

Але якщо вам потрібно використовувати більш старі версії:

Ви можете отримати доступ до файлів JSON більш типовим способом. По-перше, переконайтесь, що ваше нове typings.d.tsмісцезнаходження збігається із includeвластивістю у вашому tsconfig.jsonфайлі.

Якщо у вас немає властивості включити у свій tsconfig.jsonфайл. Тоді структура вашої папки повинна бути такою:

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

Але якщо у вас є includeвласність у вашому tsconfig.json:

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

Тоді ви typings.d.tsповинні бути в srcкаталозі, як описано у includeвластивості

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

Як і у багатьох відповідях, Ви можете визначити глобальну декларацію для всіх своїх файлів JSON.

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

але я віддаю перевагу більш типізованій версії цього. Наприклад, скажімо, у вас є такий файл конфігурації config.json:

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

Тоді ми можемо оголосити для нього певний тип:

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

Імпортувати у файли машинопису легко:

import * as Config from 'config.json';

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

Але на етапі компіляції слід скопіювати файли JSON у папку dist вручну. Я просто додаю властивість сценарію до моєї package.jsonконфігурації:

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

У свій файл визначення TS, наприклад, typings.d.ts`, ви можете додати цей рядок:

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

Потім додайте це до файлу машинопису (.ts): -

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

Ще один шлях

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

Це ви все ще можете визначити тип json - це ви хочете, і не потрібно використовувати підстановку.

Наприклад, спеціальний тип json.

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

Часто в додатках Node.js потрібен .json. З TypeScript 2.9, --resolveJsonModule дозволяє імпортувати, витягувати типи з та генерувати файли .json.

Приклад №

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