[解決済み] 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 ) は、より良い、よりスマートな解決策を導入しました。ステップ
-
追加
resolveJsonModule
をサポートし、この行をtsconfig.json
ファイルに記述します。
"compilerOptions": {
...
"resolveJsonModule": true
}
で、import文はデフォルトのexportを仮定することができるようになりました。
import data from './example.json';
と入力すると、intellisenseがjsonファイルをチェックして、Arrayなどのメソッドを使えるかどうかを確認します。
関連
-
[解決済み】jq: 文字列で配列のインデックスを作成できない
-
[解決済み] json gem のインストール中にエラー 'mkmf.rb can't find header files for ruby' が発生する。
-
[解決済み] 正しいJSONコンテンツタイプは何ですか?
-
[解決済み] JSONでコメントを使用することはできますか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] cURLでJSONデータをPOSTするにはどうすればよいですか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] JSONファイルをprettyprintする方法は?
-
[解決済み] JSONデータをファイルに書き込むにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】tsconfig.json: Build:No inputs were found in config file.
-
[解決済み] SQLAlchemy (psycopg2.ProgrammingError) can't adapt type 'dict'.
-
[解決済み] TypeScript getting error TS2304: cannot find name ' require'.
-
[解決済み] JSON標準 - 浮動小数点数
-
[解決済み】GoのJSONマーシャルでJSONのキー名を小文字にする
-
[解決済み] VS Codeで、"JSONではコメントが許可されていません "というエラーを無効にする。
-
[解決済み] 構造体に複数のネームタグを定義する方法
-
[解決済み] jqを使用してjsonドキュメントの単一の値を更新するにはどうすればよいですか?
-
[解決済み] JSON、REST、SOAP、WSDL、そしてSOA。これらはどのように結びついているのか
-
[解決済み] Angular4へのアップグレード後、'require'という名前が見つからない