でJSONをデコード
12964 ワード
タイプスクリプトはJavaScriptプログラムにタイプセーフを追加するのに非常によく適していますが、それ自身では、実行時にクラッシュしないことを保証するのに十分ではありません.
この記事はJSON decoders 実行時環境にTypeScriptコンパイル時の保証を拡張するのに役立ちます.
ユーザーとの取引に取り組んでいるので、アプリケーションを作成する
の連結を表示します 下に 最後に、あなたは 何が間違って行くことができる?さて、始めに
いくつかの例を見てみましょう.
これらの問題に対処することができます防御プログラミング技術、A . K .
JSONデコーダを使用して、指定したランタイム値が特定のコンパイル時型に準拠していることを確認します.
JSONのデコーダは最近のおかげで人気を得ているElm .
エルムのJSONデコーダは、言語のコア部分であり、彼らはelm通信にスムーズなJSを確保するためにすべての場所で使用されます.
JSONデコーダの背後にあるアイデアは、基本的なデコーダのコレクションを持っていることです
そこにはいくつかのJSONデコードライブラリがありますが、しばらく前から研究を行ったとき、残りから出てきたものがあります.Daniel Van Den Eijkel Elmのデコードライブラリの原則を維持するものを作成しました.
残念ながら、図書館は未完成で未発表だったので、私はそれをフォークして、それを磨いて、名前の下でNPMパッケージとしてそれをリリースすることに決めましたts.data.json .
ライブラリへの私の貢献は、ドキュメント、良いエラー報告、ユニットテスト、APIの改善、いくつかの新しいデコーダとNPMパッケージを公開している.
ライブラリをインストールします
我々の習慣を実行する前に
前の例で見たように、デコード処理には2つのステップがあります. まず、デコーダを宣言します 第二に、JavaScriptの値を なぜ結果を包んでいるのか
見てみましょう
見てみましょう
我々が基本を知っている今、真剣になって、我々の習慣を構築しましょう
原始的なデコーダは別として: 他のより複雑なデコーダもあります
デコードしてみましょう
私たちは、このライブラリが可能であるものの表面をひっかき始めました.デコードできます: アレイ 辞書 再帰的データ構造 NULL 未定義 そして、他の空想的なもの.
に移動GitHub repo と見つける!
この記事はJSON decoders 実行時環境にTypeScriptコンパイル時の保証を拡張するのに役立ちます.
ランタイム対コンパイル時間
ユーザーとの取引に取り組んでいるので、アプリケーションを作成する
User
種類:interface User {
firstName: string;
lastName: string;
picture: string;
email: string;
}
このタイプを使用して、注釈を付ける/me
APIのエンドポイントの結果、そしてあなたはこれですべての種類を行いますUser
しかし、アプリケーションのプロファイル領域に集中しようfirstName
+ lastName
. firstName
+ lastName
また、email
. picture
ユーザーの、または存在しない場合は、デフォルトのイメージ.User
タイプは真実を言っていない、それはすべての置換を表現しないUser
APIが返す図形.いくつかの例を見てみましょう.
// The result has null properties
{ firstName: "John", lastName: null, picture: null, email: "[email protected]" }
// The API returned null
null
// The result has undefined properties
{ firstName: "John", lastName: "Doe", email: "[email protected]" }
// The API contract changed and the UI team wasn't notified
{ fName: "John", lName: "Doe", picture: 'pic.jpg', email: "[email protected]" }
これらの問題に対処することができます防御プログラミング技術、A . K .
null
/ undefined
チェックif
しかし、他の誰かが使用したいときに何が起こるか/me
どこかほかの結果?たぶんあなたの同僚はUser
タイプ、なぜ?何が起こるかランタイムエラーの新しいベクトルを導入した.JSONデコーダを入力します
JSONデコーダを使用して、指定したランタイム値が特定のコンパイル時型に準拠していることを確認します.
JSONのデコーダは最近のおかげで人気を得ているElm .
エルムのJSONデコーダは、言語のコア部分であり、彼らはelm通信にスムーズなJSを確保するためにすべての場所で使用されます.
JSONデコーダの背後にあるアイデアは、基本的なデコーダのコレクションを持っていることです
string
, number
, boolean
, object
, array
... ) あなたがより複雑なデコーダに作成することができます.最新のJSONデコーダライブラリ
そこにはいくつかのJSONデコードライブラリがありますが、しばらく前から研究を行ったとき、残りから出てきたものがあります.Daniel Van Den Eijkel Elmのデコードライブラリの原則を維持するものを作成しました.
残念ながら、図書館は未完成で未発表だったので、私はそれをフォークして、それを磨いて、名前の下でNPMパッケージとしてそれをリリースすることに決めましたts.data.json .
ライブラリへの私の貢献は、ドキュメント、良いエラー報告、ユニットテスト、APIの改善、いくつかの新しいデコーダとNPMパッケージを公開している.
JSONデコーダの使用
ライブラリをインストールします
npm install ts.data.json --save
デコード基本
我々の習慣を実行する前に
User
デコードしてみましょうstring
最初から最後まで.import { JsonDecoder } from 'ts.data.json';
console.log( JsonDecoder.string.decode('Hi!') ); // Ok({value: 'Hi!'})
終わり!🎉アンラッピングデコーダ結果
前の例で見たように、デコード処理には2つのステップがあります.
JsonDecoder.string
. *.decode('Hi!')
, を返します.Ok
. Ok
インスタンス?失敗した場合には結果をErr
インスタンス.見てみましょう
decode()
署名は以下のようになります:decode(json: any): Result<a>
Result<a>
ユニオンタイプOk
and Err
.type Result<a> = Ok<a> | Err;
だからほとんどの時間我々は使用されませんdecode()
, 代わりに我々はおそらく使用するでしょうdecodePromise()
.見てみましょう
decodePromise()
署名は以下のようになります:decodePromise<b>(json: any): Promise<a>
デコードしてみましょうstring
始めから終わりまでdecodePromise()
:import { JsonDecoder } from 'ts.data.json';
const json = Math.random() > 0.5 ? 'Hi!' : null;
JsonDecoder.string.decodePromise(json)
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
});
時間の半分は、我々はthen()
ルートと取得Hi!
, そして、半分の時間我々はcatch()
ルートゲットnull is not a valid string
.我々が基本を知っている今、真剣になって、我々の習慣を構築しましょう
User
デコーダ.ユーザデコーダ
原始的なデコーダは別として:
JsonDecoder.string: Decoder<string>
JsonDecoder.number: Decoder<number>
JsonDecoder.boolean: Decoder<boolean>
User
私たちはJsonDecoder.object
デコーダJsonDecoder.object<a>(decoders: DecoderObject<a>, decoderName: string): Decoder<a>
すべてのデコーダが戻っているそのデコーダ< A >は何ですか?
Decoders have the logic to decode a particular value, but they don't know how to execute it, this is what the
Decoder
class is for.
Decoder<a>
has methods to execute, unwrap, chain and transform decoders / decoder values.
デコードしてみましょう
User
最初から最後まで我々はこれまで学んだすべてのトリックを使用してimport { JsonDecoder } from 'ts.data.json';
interface User {
firstName: string;
lastName: string;
}
const userDecoder = JsonDecoder.object<User>(
{
firstName: JsonDecoder.string,
lastName: JsonDecoder.string
},
'User'
);
const validUser = {
firstName: 'Nils',
lastName: 'Frahm'
};
const invalidUser = {
firstName: null,
lastName: 'Wagner'
};
const json = Math.random() > 0.5 ? validUser : invalidUser;
userDecoder
.decodePromise(json)
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
});
我々が得る時間の半分{firstName: "Nils", lastName: "Frahm"}
そして、我々が得る時間の半分<User> decoder failed at key "firstName" with error: null is not a valid string
. JsonDecoder
私たちは覆われている.ウサギ穴を行く
私たちは、このライブラリが可能であるものの表面をひっかき始めました.デコードできます:
に移動GitHub repo と見つける!
Reference
この問題について(でJSONをデコード), 我々は、より多くの情報をここで見つけました https://dev.to/joanllenas/decoding-json-with-typescript-1jjcテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol