當導入json文件時,打印文件編譯錯誤

[英]Typescript compiler error when importing json file


So the code is simple:

所以代碼很簡單:

calls.json

calls.json

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

file.ts

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


54  

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


17  

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


14  

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


2  

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


1  

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`

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/10/05/2ec244398dea94e18d3a62a917ed8e1a.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com