当导入json文件时，打印文件编译错误

So the code is simple:

所以代码很简单:

calls.json

{"SERVER":{
    "requests":{
      "one":"1"
    }
} }

file.ts

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

the generated javascript is correct and when running the node js server, the console log json.SERVER prints '{ requests: { one: '1' } }', as it should.

生成的javascript是正确的，当运行node js服务器时，控制台日志是json。服务器打印“{请求:{1:'1'}'，因为它应该。

The typescript compiler (commonjs) however, somehow does not particularly like this situation and throws: "Cannot find module '../static/calls.json'".

然而，打字稿编译器(commonjs)不太喜欢这种情况，并抛出:“找不到模块'../静态/call .json'”。

Ofcourse I tried writing a .d.ts file, like this:

当然，我试过写点什么。ts文件,如下:

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

this then obviously throws: "Ambient module declaration cannot specify relative module name".

这显然会抛出:“环境模块声明不能指定相对模块名”。

I also tried different variants, like:

我还尝试了不同的变体，比如:

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

and then requiring:

然后要求:

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

None work properly and have their own little compiler errors :)

没有正确的工作，并且有自己的编译错误:)

I want to use an external .json file because I use commonjs serverside and amd clientside and I want a single file for loading constants.

我想使用一个外部的。json文件，因为我使用commonjs服务器端和amd客户端，我想要一个文件来加载常量。

5 个解决方案

#1

Use var instead of import.

使用var而不是import。

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

You're loading a JSON file, not a module, so import shouldn't be used is this case. When var is used, require() is treated like a normal function again.

您正在加载JSON文件，而不是模块，因此不应该使用导入。当使用var时，require()再次被视为普通函数。

If you're using a Node.js definition, everything should just work, otherwise require will need to be defined.

如果你在使用一个节点。js定义，一切都应该工作，否则需要定义。

#2

This can also be done by using import statement if using webpack v2 which is already packed with json-loader.

这也可以通过使用webpack v2使用import语句来实现，webpack v2已经包含了json-loader。

Note that this is not async

注意这不是异步的

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

Also, in your typings.d.ts add the following wildcard module to avoid typescript error saying: Cannot find module

同时,在你typings.d。ts添加了下面的通配符模块，以避免说:找不到模块

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

For anyone interested in async imports, check this article by 2uality

对于任何对异步导入感兴趣的人，请通过2uality检查本文

#3

Another solution is to change data.json to data.ts and export like this

另一个解决方案是改变数据。json数据。和像这样的出口

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

and import as you would expect:

正如你所期望的那样:

import * as data from './data.ts'

#4

TS 2.9 added support for well typed json imports. Just add:

TS 2.9增加了对良好类型的json导入的支持。添加:

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

in your tsconfig.json or jsconfig.json. Now imports such as:

在你tsconfig。json或jsconfig.json。现在进口的如:

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

and

和

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

should be resolved and have proper typings too!

也应该有正确的排版!

#5

As of Typescript 2.9 you can import JSON file natively without any additional hack/loader needed.

在Typescript 2.9中，您可以直接导入JSON文件，而不需要任何额外的hack/loader。

The following excerpt is copied from said link above.

以下摘录摘自上述链接。

...TypeScript is now able to import JSON files as input files when using the node strategy for moduleResolution. This means you can use json files as part of their project, and they’ll be well-typed!

…现在，在使用模块化解决方案的节点策略时，TypeScript可以将JSON文件作为输入文件导入。这意味着您可以将json文件作为项目的一部分，它们将是很好的类型!

./src/settings.json

/ src / settings.json

{
    "dry": false,
    "debug":

./src/foo.ts

/ src / foo.ts

import settings from "./settings.json";

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

#1