DevToolPal
UK

JSON у TypeScript

Генерує інтерфейси або типи TypeScript за прикладом JSON: вкладені типи, необов'язкові поля та обробка null.

Працює локально, нічого не завантажується на сервер

Параметри

Оголошувати як
Значення null

JSON

0 симв. · 0 B

TypeScript

0 симв. · 0 B

Що робить інструмент

Генератор JSON у TypeScript читає приклад JSON, наприклад відповідь API чи файл конфігурації, і пише інтерфейси TypeScript, що його описують. Замість того щоб вручну набирати кожне поле, вставте одну справжню відповідь і отримайте типи, готові для результатів fetch, стану Redux або тестових даних.

Генератор переглядає кожне значення, а не лише перше. Числа стають number, текст — string, вкладені об’єкти отримують власні інтерфейси, а елементи масиву об’єднуються, тож поле, яке є лише в деяких елементах, позначається необов’язковим, а поле, що інколи дорівнює null, типізується як таке, що допускає null.

Як користуватися

  1. Вставте JSON у поле введення, завантажте файл .json або натисніть Приклад.
  2. Задайте назву кореневого типу й оберіть стиль: interface чи type, null як | null чи як необов’язкові поля, властивості readonly і чи додавати export до кожного оголошення.
  3. Скопіюйте TypeScript або завантажте його як файл .ts.

Некоректний JSON позначається рядком і стовпцем помилки, щоб приклад можна було одразу виправити.

Приклад

Цей JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

перетворюється на такі оголошення:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Поради

  • Один приклад показує лише те, що в ньому є. Якщо поле може бути рядком або null, додайте обидва варіанти чи помістіть кілька прикладів у масив, щоб вони об’єдналися.
  • Назви полів, що не є допустимими ідентифікаторами, як-от first-name, пишуться в лапках, тож результат завжди компілюється.
  • Результат — це відправна точка. Звужуйте рядкові поля до об’єднань літералів або Date, якщо знаєте більше, ніж показує приклад.
  • Потрібен Go? Конвертер JSON у Go використовує те саме виведення типів і пише структури з тегами json.

Часті запитання

› Як обробляються вкладені об'єкти?

Кожен вкладений об'єкт стає окремим іменованим інтерфейсом, названим за ключем у PascalCase, тож поле address дає інтерфейс Address. Об'єкти з однаковою структурою використовують спільний інтерфейс, а за збігу імен додається номер, наприклад Address2.

› Як типізуються масиви?

Усі елементи масиву об'єднуються в один тип елемента. Масив об'єктів стає масивом інтерфейсу, названого за ключем в однині, тож orders дає Order[]. Змішані масиви стають об'єднанням на кшталт (string | number)[], а порожні масиви — unknown[].

› Коли поле позначається як необов'язкове?

Коли його немає в деяких об'єктах масиву. Поле, яке є всюди, але інколи дорівнює null, типово записується як T | null. Перемкніть значення null у режим необов'язкових, щоб прибрати null і позначити поле знаком питання.

› Що обрати, interface чи type?

Обидва описують ті самі форми об'єктів. Інтерфейси можна розширювати й об'єднувати, і багато посібників зі стилю радять їх для об'єктних типів. Псевдоніми type зручні, якщо ви плануєте поєднувати результат з об'єднаннями чи відображеними типами. Обирайте те, що прийнято у вашому коді.

› Чи надсилається мій JSON на сервер?

Ні. Типи виводяться у браузері, тож можна сміливо вставляти справжні відповіді API.