JSON naar TypeScript
Plak een JSON-voorbeeld en de tool leidt TypeScript-interfaces af die passen bij de structuur ervan. Velden worden getypeerd op basis van de waargenomen waarden (string, number, boolean, Array<T>); geneste objecten krijgen hun eigen benoemde interfaces; en velden die als null of ontbrekend worden waargenomen, worden optioneel (?) of nullable (| null), afhankelijk van de stijl die u verkiest.
JSON naar TypeScript converteren
-
1
JSON plakken
Eén voorbeeld volstaat, maar meerdere voorbeelden verbeteren de afleiding van nullbaarheid en uniontypen.
-
2
Kies de uitvoerstijl
`interface` (standaard), `type`-alias, of een alleen-lezen interface waarbij alle velden zijn gemarkeerd als `readonly`.
-
3
Kies de optionaliteitsstrategie
Markeer een veld als `?` (kan ontbreken) of `| null` (altijd aanwezig, maar kan null zijn).
-
4
Kopieer de typen
Plak ze in een `.ts`-bestand en u hebt sterk getypeerde toegang tot het API-antwoord.
Voorbeeld
Invoer:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
Uitvoer:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
Typetoewijzing
| JSON | TypeScript |
|---|---|
| tekenreeks | string |
| geheel getal / decimaal | number |
| booleaanse waarde | boolean |
| alleen null | null |
| null + T | T | null (of T?) |
| array van T | T[] |
| gemengde array | (T1 | T2)[] |
| object | Benoemde geneste interface |
| lege array | unknown[] (kan niet worden afgeleid) |
Optioneel veld versus nullable veld
foo?: string, het veld kan ontbreken in het object. Er geldt eenundefined-controle.foo: string | null, het veld is altijd aanwezig, maar kan expliciet null zijn.foo?: string | null, kan ontbreken OF null zijn.
JSON zelf kent geen undefined, maar API’s geven afwezigheid op verschillende manieren aan. Stem dit af op de semantiek van uw API.
- REST-API’s laten ontbrekende velden doorgaans weg ->
?:. - GraphQL retourneert altijd elk opgevraagd veld ->
| null. - Sommige SDK’s gebruiken beide in verschillende contexten.
Uniontypen versus letterlijke typen
Als de tool ziet dat hetzelfde tekenreeksveld in de voorbeelden slechts een kleine set waarden aanneemt ("status": "pending", "active", "archived"), kan hij een union van tekenreeksliteralen genereren:
status: "pending" | "active" | "archived";
Schakel “unions van tekenreeksliteralen afleiden” in als u dit wilt.
Veelgemaakte fouten
- Afleiden uit één voorbeeld. Elk veld wordt verplicht; nullbaarheid kan niet worden waargenomen. Geef voor betere typen 5-10 gevarieerde voorbeelden op.
- Lege arrays.
"tags": []geeft geen typeinformatie, de generator produceertunknown[]. Geef een voorbeeld met ten minste één element. - Arrays met gemengde typen.
[1, "two", true]levert(number | string | boolean)[]op. Meestal betekent dit dat de JSON beter opnieuw kan worden ontworpen dan getypeerd. - Numerieke tekenreekssleutels. JSON
{"1": "a", "2": "b"}is in TypeScript nog steeds een object (Record<string, string>), geen array. De generator verwerkt dit correct.
Veelgestelde vragen
Stem het af op uw API. REST-API’s die null-velden weglaten passen bij ?:. GraphQL, dat altijd elk geselecteerd veld retourneert, past bij | null. Bij twijfel is T | null met verplichte syntaxis strenger en vangt het meer bugs af tijdens het compileren.
Ja, als u dit inschakelt en meerdere voorbeelden aanlevert. Een veld dat in de voorbeelden 2-5 verschillende tekenreekswaarden vertoont, wordt uitgevoerd als een letterlijke union. Boven die drempel valt het terug op string.
In de meeste gevallen interface, het staat open voor uitbreiding en TypeScript optimaliseert het beter. type-aliassen zijn handig voor unions, intersecties, tuples en mapped types. Voor uit JSON afgeleide typen werkt beide; kies een projectconventie.
Ja. Elk genest object wordt een eigen interface, met namen die zijn afgeleid van de sleutel (user.address -> Address). Overweeg voor zeer diepe of repetitieve structuren een JSON Schema en een speciale schema-to-TS-generator.
Gerelateerde tools
JSON naar PHP-array
Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.
Luhn-algoritme-checker
Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.
Webpack-configuratiegenerator
Maak een webpack.config.js voor webpack 5 vanuit een kort formulier: stel entry, uitvoermap en mode in en zet TypeScript, Babel, een CSS-loader, HtmlWebpackPlugin en een dev-server aan.
Telefoonnummers controleren
Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.
SVG-golfgenerator
Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.
Sneltoetsenoverzicht
Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.
Tool beschikbaar in andere talen
- JSONからTypeScriptへ [JA]
- JSON till TypeScript [SV]
- JSON ke TypeScript [ID]
- JSON para TypeScript [PT]
- JSON에서 TypeScript로 [KO]
- JSON vers TypeScript [FR]
- JSON sang TypeScript [VI]
- JSON zu TypeScript [DE]
- تحويل JSON إلى TypeScript [AR]
- JSON เป็น TypeScript [TH]
- JSON do TypeScript [PL]
- JSON a TypeScript [ES]
- JSON в TypeScript [RU]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]
- JSON a TypeScript [IT]
- JSON to TypeScript [EN]