100% ローカル — データがブラウザの外に出ることはありません

JSONをFlowに変換|プロジェクトで読み込める型別名にする

JSONのサンプルをFlowの型別名に変換します。入れ子のオブジェクトにも名前が付くので、受け取ったデータが、必要な場所で読み込める型として手元にそのまま残ります。

高速 プライベート Cookieゼロ

JSON 入力

Flow 出力

このツールの動作

JSON の標本が Flow の型別名になります。オブジェクト一つにつき一つです。

{ "id": 1, "name": "Ada", "address": { "city": "Paris" } }
export type Root = {
  id: number,
  name: string,
  address: Address,
};

export type Address = {
  city: string,
};

根が一覧のときも、その一覧に名前がつきます。

export type Users = UsersItem[];

この別名は以前ありませんでした。要素の型だけが出て、設定した根の名前はどこにも現れませんでした。この文章を書く過程で見つけ、直しました。

厳密さは私たちが決めることではない

出力は { … } と書きます。{| … |} でも、末尾の ... でもありません。近年の Flow が有効にする exact_by_default=true のもとでは、このオブジェクトは厳密です。余分なプロパティは誤りになります。その旗がなければ非厳密で、余分は許されます。

どちらにも理があり、その違いはあなたの .flowconfig に記された、計画全体の判断です。どちらかの印を書き込むことは、それについて何も述べていない標本を口実に、その判断を上書きすることです。だから生成される型は、あなたの設定にただ従います。

any ではなく mixed

空の配列は mixed[] に、形の分からない値は mixed になります。mixed の値打ちは、使う前に絞り込むことを Flow が強いる点にあります。型が本当に分からないとき、望ましいのはそれです。any は出力を小ぎれいに見せて、データが最も分かっていない場所で検査器を止めます。

文書ひとつでは言えないこと

省略可能なものはありません。name: string は「ある」という意味で、標本にあったからです。ときどき無い項目なら name?: string に直してください。null になりうるなら string | null です。標本が証明するのは、そこに入っているものだけです。

型の混ざった配列は合併型 (number | string)[] になります。標本を正確に述べており、実際のデータより広いことも狭いこともあります。妥当な識別子でない鍵は引用符を保ちます。"content-type": string のように。

プライバシー

すべての処理はブラウザ内のJavaScriptだけで完結します。データがアップロードされることはないため、機密情報でも安心して利用でき、オフラインでも動作します。

よくある質問

生成されるオブジェクトは厳密ですか、非厳密ですか。
どちらも書きません。出力は素の `{ … }` なので、あなたの `.flowconfig` が決めます。近年の Flow が既定で入れる `exact_by_default=true` があれば、これらは厳密です。無ければ非厳密です。`{| |}` や末尾の `...` を書けば、標本が何も知らない事柄について、計画全体の選択を押しつけることになります。
なぜ `any` ではなく `mixed` なのですか。
`mixed` のほうが正直だからです。空の配列はその要素について何も語らず、`mixed` はまさにそれを言いつつ、使う前に絞り込むことを強います。`any` は同じことを言ってから、あらゆる誤りを黙って通します。型が分からないことは、検査器を切る理由になりません。
いまから Flow で始めるべきでしょうか。
あなたが決めることで、この道具はどちらでも役に立ちます。Flow は生きており、TypeScript の隆盛より前からあるコードや、Meta の周辺で使われています。そうした事情なしに今日選ぶなら、型定義の蓄積は TypeScript のほうが大きく、この場所はそちらへの変換も備えています。

関連ツール