[解決済み】TypeScriptでJSONファイルを取り込む

質問

私は JSON ファイルは次のようなものです。

{

  "primaryBright":    "#2DC6FB",
  "primaryMain":      "#05B4F0",
  "primaryDarker":    "#04A1D7",
  "primaryDarkest":   "#048FBE",

  "secondaryBright":  "#4CD2C0",
  "secondaryMain":    "#00BFA5",
  "secondaryDarker":  "#009884",
  "secondaryDarkest": "#007F6E",

  "tertiaryMain":     "#FA555A",
  "tertiaryDarker":   "#F93C42",
  "tertiaryDarkest":  "#F9232A",

  "darkGrey":         "#333333",
  "lightGrey":        "#777777"
}

にインポートしようとしている。 .tsx ファイルを作成します。そのために、型定義にこれを追加しました。

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

そして、このようにインポートしています。

import colors = require('../colors.json')

そして、ファイルの中で、色 primaryMain として colors.primaryMain . しかし、私はエラーが発生します。

プロパティ 'primaryMain' はタイプ 'typeof "*.json"' に存在しません。

どうすればいいですか？

インポート形式とモジュール宣言は、モジュールの形状、何をエクスポートするかについて合意する必要があります。

と書くと（TypeScript 2.9以降、互換性のあるモジュール形式をターゲットにした場合、JSONのインポートには最適でない行為 ^参照 )

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

で終わるスペシファイアを持つすべてのモジュールのことを指しているのですね。 .json には、1つのエクスポート という名前の default .

このようなモジュールを正しく消費するには、次のような方法があります。

import a from "a.json";
a.primaryMain

そして

import * as a from "a.json";
a.default.primaryMain

そして

import {default as a} from "a.json";
a.primaryMain

そして

import a = require("a.json");
a.default.primaryMain

最初の形式は最良のものであり、この構文上の糖分を活用することで、JavaScriptに default をエクスポートします。

しかし、何が間違っているのかを知るヒントを与えるために、他のフォームを紹介しました。特に最後の1つに注意してください。 require はモジュールそのものを表すオブジェクトを与え ではなく は、そのエクスポートされたバインディングです。

では、なぜエラーになるのでしょうか？それは、あなたが次のように書いたからです。

import a = require("a.json");
a.primaryMain

という名前のエクスポートはありません。 primaryMain で宣言された "*.json" .

これらはすべて、モジュールローダーがJSONを default をエクスポートします。

注 TypeScript 2.9からは --resolveJsonModule コンパイラーフラグ TypeScript がインポートされるように解析する .json ファイルの形状に関する正しい情報を提供し、 ワイルドカードモジュール宣言の必要性をなくし、ファイルの存在を検証します。これは、特定のターゲットモジュール形式ではサポートされていません。