1. ホーム
  2. json

[解決済み] JSONファイルをTypeScriptファイルに取り込むには?

2022-08-17 23:56:38

質問

Angular Mapsを使用して地図アプリケーションを構築しており、場所を定義するマーカーのリストとしてJSONファイルをインポートしたいと考えています。私はこのJSONファイルをapp.component.tsの中でmarker[]配列として使用したいと思っています。TypeScriptファイル内でハードコードされたマーカーの配列を定義する代わりに。

この JSON ファイルをインポートして私のプロジェクトで使用するには、どのようなプロセスが最適でしょうか。何かご指示があれば、ぜひお願いします。

どのように解決するのですか?

Aonepathanのワンライナーは、最近のtypescriptのアップデートまで、私のために機能していました。

私は Jecelyn Yeen の ポスト では、このスニペットを TS 定義ファイルに書き込むことを提案しています。

ファイルを追加する typings.d.ts をプロジェクトのルート・フォルダに追加して、以下の内容を記述します。

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

というように、データをインポートしてください。

import * as data from './example.json';

update 2019年7月です。

Typescript 2.9 ( docs ) は、より良い、よりスマートな解決策を導入しました。ステップ

  1. 追加 resolveJsonModule をサポートし、この行を tsconfig.json ファイルに記述します。
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

で、import文はデフォルトのexportを仮定することができるようになりました。

import data from './example.json';

と入力すると、intellisenseがjsonファイルをチェックして、Arrayなどのメソッドを使えるかどうかを確認します。