質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

1583閲覧

TypescriptでimportしたJsonファイルに型設定を綺麗にしたい

syoshinsya-

総合スコア21

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2022/08/21 07:27

編集2022/08/21 17:13

やっていること

変数を使ってJsonファイルのキーから値を取り出したいと思って、カッコの中に変数を入れたところTS7053が出てしまいました。

Jsonファイルをインポートして使うときに設定をしたいです。
手動でやるのもいいですが、自動でできるようにしたいです。

エラーの出るソースコード

TypeScript

1import {hoge} from "./json/hoge"; 2 3type FormValue = { 4 id: string, 5 name: string 6} 7 8const formValue: FormValue = { 9 id: "123", 10 name: "hoge" 11} 12 13const eMail = hoge[formValue.id]; //ここでTS7053

自分での回避策

手動で型定義した別の変数に入れることで回避していますが、このJsonファイルは何度も使うのでこの処理は書きたくありません。
どこかで一括設定して、importした時から適切な型定義がされてほしいです。

TypeScript

1import {hoge} from "./json/hoge"; 2 3type FormValue = { 4 id: string, 5 name: string 6} 7 8type HogeJsonType = { 9 [key: string]: string 10} 11 12const formValue: FormValue = { 13 id: "123", 14 name: "hoge" 15} 16 17const hogeJson: HogeJsonType = hoge 18 19const eMail = hogeJson[formValue.id];

Tsconfigの中味

json

1{ 2 "compilerOptions": { 3 4 /* Projects */ 5 6 /* Language and Environment */ 7 "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ 8 9 /* Modules */ 10 "module": "commonjs", /* Specify what module code is generated. */ 11 "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ 12 "resolveJsonModule": true, /* Enable importing .json files. */ 13 14 /* JavaScript Support */ 15 16 /* Emit */ 17 "outDir": "./out", /* Specify an output folder for all emitted files. */ 18 19 /* Interop Constraints */ 20 "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ 21 "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ 22 23 /* Type Checking */ 24 "strict": true, /* Enable all strict type-checking options. */ 25 26 /* Completeness */ 27 "skipLibCheck": true /* Skip type checking all .d.ts files. */ 28 }, 29 "include": [ 30 "src/**/*" 31 ], 32 "exclude": [ 33 "node_modules" 34 ] 35} 36

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

どこかで一括設定して、importした時から適切な型定義がされてほしいです。

「手動で型定義した別の変数に入れる」操作を行ったファイルからエクスポートを行って、他のファイルではJSONを直接呼ばずそのファイルを呼ぶ、としてはどうでしょうか。

typescript

1import {hoge} from "./json/hoge"; 2 3type HogeJsonType = { 4 [key: string]: string 5} 6 7const hogeJson: HogeJsonType = hoge 8 9export {hogeJson} 10

投稿2022/08/21 07:37

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syoshinsya-

2022/08/21 08:13

あ!!そうします...ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問