Как импортировать файл JSON в файл .tsx? [Дубликат]

В соответствии с TypScript 2.9 вы можете импортировать файл JSON изначально без дополнительного хакера / загрузчика.

Следующий фрагмент копируется из указанной ссылки выше.

... TypeScript теперь может импортировать файлы JSON в качестве входных файлов при использовании стратегии узла для moduleResolution. Это означает, что вы можете использовать json-файлы как часть своего проекта, и они будут хорошо напечатаны!

./src/settings.json

{
    "dry": false,
    "debug": 

./src/foo.ts

import settings from "./settings.json";

settings.debug === true;  // Okay
settings.dry === 2;       // Error! Can't compare a `boolean` and `number`

TS 2.9 добавлена ​​поддержка хорошо введенных json import . Просто добавьте:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

в свои tsconfig.json или jsconfig.json. Теперь импорт, такой как:

import json = require('../static/calls.json');

и

import * as json from '../static/calls.json';

, должен быть разрешен и иметь правильные типизации!

Другое решение - изменить data.json на data.ts и экспортировать, как это

export default {
  "key" : {
    ...
  }
}

, и импортировать, как и следовало ожидать:

import { default as data } from './data'

Это может также выполнить с помощью оператора import, если использовать webpack v2 , который уже упакован с помощью json-loader .

Обратите внимание, что это не async

import data from './data.json';//Note that this is not async

Кроме того, в вашем файле typings.d.ts добавьте следующий подстановочный модуль , чтобы избежать машинописная ошибка: Cannot find module

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

Для всех, кто интересуется импортом async, проверьте эту статью на 2uality