Ошибка компилятора Typescript при импорте файла json

таким образом, код прост:

звонки.в JSON

{"SERVER":{
    "requests":{
      "one":"1"
    }
} }
.ТС 
import json = require('../static/calls.json');
console.log(json.SERVER);

сгенерированный javascript является правильным и при запуске сервера JS узла, журнал консоли json.Сервер печатает "{requests: { one: '1'}}", как и должно быть.

компилятор typescript (commonjs), однако, как-то не особенно нравится эта ситуация и бросает: "не удается найти модуль"../ статические / звонки.формат JSON'".

конечно, я попытался написать .д.ТС файл, например:

declare module '../static/calls.json'{
    var exp:any;
    export = exp;
}

это, очевидно, бросает: "объявление окружающего модуля не может указать относительное имя модуля".

Я также пробовал разные варианты, например:

declare module 'calls.json' {
    import * as json from '/private/static/calls.json';
    export = json;
}

а потом требует:

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

не работает должным образом и имеют свои собственные небольшие ошибки компилятора :)

Я хочу использовать внешний .JSON-файл, потому что я использую commonjs serverside и AMD clientside, и мне нужен один файл для загрузки констант.

39
commonjs javascript json node.js typescript

6 ответов

использовать var вместо import.

var json = require('./calls.json');

вы загружаете файл JSON, а не модуль, так import не следует использовать в этом случае. Когда var используется require() снова рассматривается как нормальная функция.

если вы используете узел.JS определение, все должно просто работать, иначе require необходимо будет определить.

65

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

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

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

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

это может и сделать с помощью import заявление при использовании webpack v2 который уже упакован с в JSON-погрузчик.

обратите внимание, что это не асинхронный

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

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

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

для всех, кто интересуется async импорт, Регистрация эта статья 2uality

17

TS 2.9 добавлена поддержка хорошо типизированного импорта json. Просто добавьте:

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

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

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

и 

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

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

10

по состоянию на машинопись 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`
2
For Angular 6 it can work with simple HTTP get call as below

Service
//interface, could be Array , object 
export interface ResultJSON{

}
 //Read JSON file for 3DWide
  getJSON() {
    return this.http.get(this.filepathUrl);
  }

Component :import both service and interface and use as below
resultJSON :ResultJSON;
 this
      .testService
      .getJSON()
      .subscribe((data: ResultJSON) => {
           this.resultJSON= data;
           console.log(this.resultJSON); 


         });
0