Converter JSON em tipos Flow — Numio
Gera aliases de tipo Flow a partir de uma amostra JSON, começando com // @flow. Cada objeto aninhado ganha seu próprio tipo exportado, e as chaves ausentes em alguns itens de um array são marcadas como opcionais com ?.
Tipar respostas de API em um código React ou React Native que ainda usa Flow.
JSON
Flow
Quando usar
- Tipar respostas de API em um código React ou React Native que ainda usa Flow.
- Escrever tipos para fixtures ou dados mock em uma suíte de testes verificada pelo Flow.
Como usar
- Cole um objeto JSON no editor.
- Abra as configurações para mudar prefix (padrão I) e Root Name (padrão RootObject); o tipo raiz vira IRootObject e os tipos aninhados recebem o mesmo prefixo.
- Copie os tipos exportados para um arquivo .js que mantenha o cabeçalho // @flow.
Entrada JSON
{
"id": 42,
"name": "Ada Lovelace",
"email": null,
"active": true,
"score": 98.5,
"tags": ["admin", "dev"],
"address": { "city": "London", "postCode": "NW1" }
}Tipos Flow
// @flow
export type IRootObject = {
id: number
name: string
email: null
active: boolean
score: number
tags: string[]
address: IAddress
}
export type IAddress = {
city: string
postCode: string
}Detalhes e limitações
Roda no navegador com a biblioteca json-ts, e o resultado é formatado com Prettier; nada é enviado.
O Flow não tem namespaces, então a página só oferece prefix e Root Name; a saída é sempre composta de declarações export type de nível superior.
Valores null são tipados como null e arrays vazios como any[]. Mude-os para maybe types como ?string quando o campo puder ter um valor.
A saída usa tipos de objeto inexatos e sem $ReadOnly; adicione {| |} ou wrappers somente leitura se o seu projeto exigir.
FAQ
Como os campos opcionais são detectados?
Só a partir de arrays de objetos: uma chave ausente em alguns itens vira opcional, por exemplo giftWrap?: boolean. Chaves de nível superior nunca são opcionais, porque um único objeto não tem outra amostra para comparação.
Posso converter um array JSON na raiz?
Sim. A raiz vira um alias de array como export type IRootObject = IRootObjectItem[], e o tipo do item mescla as chaves de todos os elementos, com as chaves ausentes marcadas como opcionais.
Ele lida com arrays de tipos mistos?
Sim, um array plano como ["a", 2] vira (string | number)[]. Arrays aninhados viram any[].