☰

TypeScriptでJSONファイルをインポートする 質問する

tag-icon • tag-icon json typescript
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" に存在しません

ベストアンサー1

TypeScript 2.9 以降では、次のようにすることで、型安全性やインテリセンスなどの利点を備えた JSON ファイルを簡単にインポートできます。

import colorsJson from '../colors.json'; // This import style requires "esModuleInterop", see "side notes"
console.log(colorsJson.primaryBright);

compilerOptionsこれらの設定を（のセクションに追加してくださいtsconfig.json）ドキュメンテーション):

"resolveJsonModule": true,
"esModuleInterop": true,

補足事項:

  • Typescript 2.9.0にはこのJSON機能に関するバグがありましたが、2.9.2で修正されました。
  • esModuleInteropはcolorsJsonのデフォルトのインポートにのみ必要です。これをfalseに設定したままにしておくと、次のようにインポートする必要があります。import * as colorsJson from '../colors.json'

おすすめ記事