web-dev-qa-db-ja.com

JSONファイルをインポートする際のタイプスクリプトコンパイラエラー

したがって、コードは簡単です。

calls.json

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

file.ts

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

生成されたjavascriptは正しく、ノードjsサーバーを実行すると、コンソールログjson.SERVERは '{requests：{one：' 1 '}}'を出力するはずです。

ただし、TypeScriptコンパイラ（commonjs）は、どういうわけかこの状況が特に好きではなく、「モジュール '../static/calls.json'が見つかりません」とスローします。

もちろん、次のように.d.tsファイルを作成してみました。

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');

どれも適切に動作せず、独自の小さなコンパイラエラーがあります:)

CommonjsサーバーサイドとAMDクライアントサイドを使用し、定数を読み込むための単一のファイルが必要なため、外部.jsonファイルを使用します。

javascriptjsonnode.jstypescriptcommonjs
51
Ken

varの代わりにimportを使用します。

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

モジュールではなくJSONファイルをロードしているため、この場合はimportを使用しないでください。 varを使用すると、require()は通常の関数と同様に扱われます。

Node.js定義を使用している場合は、すべてが正常に機能するはずです。そうでない場合は、requireを定義する必要があります。

77
thoughtrepo

別の解決策は、data.jsonをdata.tsに変更し、次のようにエクスポートすることです

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

期待どおりにインポートします。

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

webpack v2 を既に使用している場合は、importステートメントを使用して、これをまたはで実行できます- json-loader 。

これは非同期ではないことに注意してください

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 をチェックしてください。

20
sabithpocker

TS 2.9 適切に型指定されたjsonインポートのサポートを追加 。追加するだけです：

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

tsconfig.jsonまたはjsconfig.jsonで。次のようなインポートが可能になりました：

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

そして

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

解決し、適切なタイピングもする必要があります！

16
Matt Bierner

TypeScript 2.9 以降、追加のハック/ローダーを必要とせずにJSONファイルをネイティブにインポートできます。

上記のリンクから次の抜粋がコピーされます。

... TypeRescriptでnodeStrategyを使用して、JSONファイルを入力ファイルとしてインポートできるようになりました。これは、プロジェクトの一部として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
doomleika