タイプスクリプトにおける強く型付けされたJSON
2298 ワード
スラックコミュニティの1つの誰かが今日、JSONをタイプスクリプトでタイプする方法を尋ねました.そして、特にJSONを輸入して、それを入力しました.彼らはJSONを鋳造するかどうか疑問に思った
解決策は複雑ではない.我々の手を少し汚くして、我々のプロジェクトのためのTypeScriptコンパイラオプションを掘る必要があります.
デフォルトでは、JSONをインポートする場合、TypeScriptは以下のエラーメッセージでインポートできません.
それで、TypeScriptは何をすべきかを私たちに伝えます.追加する
これは、型付けされた方法でデータを使用するのに最適ですが、プロジェクトの他の場所でJSON型を必要とする場合はどうなりますか?私たちはそれを使用するためのタイプを作成することができます
このCodesandBoxで遊ぶことができて、行動でそれを見ている若干の楽しみがあります.
unknown
そして、消費が良いアプローチであったとき、既知のタイプに鋳造してください.解決策は複雑ではない.我々の手を少し汚くして、我々のプロジェクトのためのTypeScriptコンパイラオプションを掘る必要があります.
デフォルトでは、JSONをインポートする場合、TypeScriptは以下のエラーメッセージでインポートできません.
Cannot find module './data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.ts(2732)

それで、TypeScriptは何をすべきかを私たちに伝えます.追加する
--resolveJsonModule
フラグ.これは、私たちがtypescript CLIを走らせているならば、役に立ちます、しかし、それは我々がしていることでありません.何をする必要があるresolveJsonModule
TSconfigのコンパイラオプションのキー.JSONファイルと設定true
.{
"compilerOptions": {
"resolveJsonModule": true,
// more awesome compiler options
}
}
一旦それが完了したら、あなたがタイプするならば、あなたは気づくでしょうdata.
, JSONデータを完全にタイプしました.
これは、型付けされた方法でデータを使用するのに最適ですが、プロジェクトの他の場所でJSON型を必要とする場合はどうなりますか?私たちはそれを使用するためのタイプを作成することができます
typeof
.type PersonalInfo = typeof data;

このCodesandBoxで遊ぶことができて、行動でそれを見ている若干の楽しみがあります.
Reference
この問題について(タイプスクリプトにおける強く型付けされたJSON), 我々は、より多くの情報をここで見つけました https://dev.to/nickytonline/strongly-typed-json-in-typescript-5gb2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol