JSON do TypeScript
Wklej próbkę JSON, a narzędzie wywnioskuje interfejsy TypeScript odpowiadające jej strukturze. Typy pól są ustalane na podstawie zaobserwowanych wartości (string, number, boolean, Array<T>); obiekty zagnieżdżone otrzymują własne nazwane interfejsy; a pola zaobserwowane jako null lub brakujące stają się opcjonalne (?) lub dopuszczające null (| null), w zależności od wybranego stylu.
Jak przekonwertować JSON na TypeScript
-
1
Wklej JSON
Jedna próbka wystarczy, ale kilka próbek poprawia wnioskowanie o dopuszczalności null i typach unii.
-
2
Wybierz styl wyjścia
`interface` (domyślnie), alias `type` lub interfejs tylko do odczytu, w którym wszystkie pola są oznaczone jako `readonly`.
-
3
Wybierz strategię opcjonalności
Oznacz pole jako `?` (może nie występować) lub `| null` (zawsze obecne, ale może mieć wartość null).
-
4
Skopiuj typy
Wklej je do pliku `.ts`, a uzyskasz silnie typowany dostęp do odpowiedzi API.
Przykład
Wejście:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
Wyjście:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
Mapowanie typów
| JSON | TypeScript |
|---|---|
| ciąg znaków | string |
| liczba całkowita / dziesiętna | number |
| wartość logiczna | boolean |
| tylko null | null |
| null + T | T | null (lub T?) |
| tablica typu T | T[] |
| tablica mieszana | (T1 | T2)[] |
| obiekt | Nazwany zagnieżdżony interfejs |
| pusta tablica | unknown[] (nie można wywnioskować) |
Pole opcjonalne a pole dopuszczające null
foo?: string, to pole może nie występować w obiekcie. Obowiązuje sprawdzanieundefined.foo: string | null, to pole jest zawsze obecne, ale może być jawnie równe null.foo?: string | null, może nie występować LUB być równe null.
Sam JSON nie ma undefined, ale różne API sygnalizują brak pola na różne sposoby. Dostosuj to do semantyki swojego API.
- API REST zwykle pomijają brakujące pola ->
?:. - GraphQL zawsze zwraca każde żądane pole ->
| null. - Niektóre SDK używają obu podejść w różnych kontekstach.
Typy unii a typy literałowe
Jeśli narzędzie zauważy, że to samo pole tekstowe przyjmuje w próbkach jedynie niewielki zbiór wartości ("status": "pending", "active", "archived"), może wygenerować unię literałów tekstowych:
status: "pending" | "active" | "archived";
Włącz „wnioskuj unie literałów tekstowych”, jeśli tego chcesz.
Częste błędy
- Wnioskowanie z jednej próbki. Każde pole staje się wymagane; nie można zaobserwować dopuszczalności null. Aby uzyskać lepsze typy, podaj 5-10 zróżnicowanych próbek.
- Puste tablice.
"tags": []nie dostarcza informacji o typie, generator zwracaunknown[]. Podaj próbkę zawierającą co najmniej jeden element. - Tablice o mieszanych typach.
[1, "two", true]daje(number | string | boolean)[]. Zwykle oznacza to, że JSON należałoby przeprojektować, a nie typować w obecnej postaci. - Klucze będące ciągami liczbowymi. JSON
{"1": "a", "2": "b"}jest w TypeScript nadal obiektem (Record<string, string>), a nie tablicą. Generator obsługuje to poprawnie.
Najczęściej zadawane pytania
Dostosuj do swojego API. API REST, które pomijają pola null, pasują do ?:. GraphQL, które zawsze zwraca każde wybrane pole, pasuje do | null. W razie wątpliwości T | null ze składnią wymaganą jest bardziej rygorystyczne i wychwytuje więcej błędów podczas kompilacji.
Tak, jeśli to włączysz i podasz kilka próbek. Pole, w którym w próbkach zaobserwowano od 2 do 5 różnych wartości tekstowych, jest zwracane jako unia literałów. Po przekroczeniu tego progu następuje powrót do string.
W większości przypadków interface, jest otwarty na rozszerzanie, a TypeScript lepiej go optymalizuje. Aliasy type są przydatne dla unii, przecięć, krotek i typów mapowanych. Dla typów wywiedzionych z JSON działają oba; wybierz konwencję projektu.
Tak. Każdy zagnieżdżony obiekt staje się osobnym interfejsem, którego nazwa jest wywodzona z klucza (user.address -> Address). W przypadku bardzo głębokich lub powtarzalnych struktur rozważ JSON Schema oraz dedykowany generator schema-to-TS.
Powiązane narzędzia
Tabela ASCII
Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.
Referencja znaków HTML
Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.
Skróty klawiaturowe
Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.
Generator EditorConfig
Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.
Walidator adresów e-mail
Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.
Formatowanie HTML
Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.
Narzędzie jest dostępne w innych językach
- JSON ke TypeScript [ID]
- JSON sang TypeScript [VI]
- JSON a TypeScript [ES]
- JSON vers TypeScript [FR]
- JSON에서 TypeScript로 [KO]
- JSON naar TypeScript [NL]
- JSON till TypeScript [SV]
- JSONからTypeScriptへ [JA]
- JSON เป็น TypeScript [TH]
- تحويل JSON إلى TypeScript [AR]
- JSON zu TypeScript [DE]
- JSON para TypeScript [PT]
- JSON a TypeScript [IT]
- JSON в TypeScript [RU]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]
- JSON to TypeScript [EN]