There are some tools out there that will produce TypeScript Interfaces from a
given JSON structure for you. But they only give you the basic types (string,
number, etc.). What if there is an API where you want to get its literal
values/types?
# to add to your project
npm install json-literal-typer
# to use command line interface
npm install --global json-literal-typerThere is a live demo at https://json-literal-typer.peppnet.de
Let's assume there is an API for gas stations. It will respond with data like this:
{
"stations": [
{ "id": 1, "name": "station A", "status": "OPEN", "attributes": ["fast"] },
{
"id": 2,
"name": "station B",
"status": "OPEN",
"attributes": ["fast", "24/7"],
"operator": "Station Corp."
},
{
"id": 3,
"name": "station C",
"status": "CLOSED",
"attributes": [],
"operator": "ACME Inc."
}
]
}What you would get from other tools is:
interface Station {
id: number;
name: string;
status: string;
attributes: string[];
operator?: string;
}
interface RootObject {
stations: Station[];
}Nice. But what if you could get:
interface Stations {
attributes: ('24/7' | 'fast')[];
id: 1 | 2 | 3;
name: 'station A' | 'station B' | 'station C';
operator?: 'ACME Inc.' | 'Station Corp.';
status: 'CLOSED' | 'OPEN';
}
interface Root {
stations: Stations[];
}npm show json-literal-typer versions --json | json-literal-typer- json-to-ts - Convert jsons to typescript interfaces
- json2ts - generate TypeScript interfaces from JSON
- quicktype - Generate types and converters from JSON, Schema, and GraphQL
- ts-ast-viewer - TypeScript AST viewer
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent