JSON у TypeScript
Визначайте інтерфейси TypeScript зі зразка JSON локально. Безкоштовний генератор обробляє вкладені об'єкти, масиви та об'єднання типів без завантаження ваших даних.
🔒 Працює повністю у вашому браузері — нічого не завантажуєтьсяЩо робить JSON у TypeScript
JSON у TypeScript читає зразок JSON і виводить із нього строго типізовані інтерфейси TypeScript, що описують його структуру. Інструмент рекурсивно обходить значення: об'єкти стають іменованими інтерфейсами, примітивні значення — відповідними типами string, number, boolean або null, а масиви — типами елементів у квадратних дужках. Коли масив містить елементи різних типів, генератор об'єднує їх в union, щоб результат і далі відповідав початковим даним. Це корисно, коли ви працюєте з API без опублікованих типів, додаєте типову безпеку до застарілого навантаження або перетворюєте швидкий тестовий набір на модель для повторного використання.
Масиви об'єктів обробляються обережно. Замість того щоб типізувати лише перший елемент, інструмент зливає всі об'єкти масиву в один інтерфейс, збираючи об'єднання ключів. Ключі, яких бракує в деяких елементах, позначаються як необов'язкові знаком питання в кінці, що відображає те, як реальні відповіді містять поля лише тоді, коли вони заповнені. Вкладені об'єкти виокремлюються в власні іменовані інтерфейси, назви яких походять від імені властивості, тож результат виглядає як написані вручну моделі, а не один глибоко вбудований тип.
Приватний робочий процес у браузері
Увесь розбір і виведення типів відбуваються у вашому браузері за допомогою клієнтського JavaScript. Інструмент не завантажує ваш JSON, відповіді API, ідентифікатори, токени чи зразки, схожі на дані клієнтів, на сервер і не потребує облікового запису. Така суто локальна модель важлива, бо дані, які вставляють у генератор типів, часто є реальною відповіддю з production, захопленою під час налагодження. Робота на вашому комп'ютері знижує ризики та робить результат миттєвим, адже між вставленням і результатом немає мережевого обміну.
Інтерфейс тримає поруч вхідний JSON, назву кореня та згенеровані інтерфейси, щоб ви могли перевірити виведення перед копіюванням. Результати все одно варто переглянути, перш ніж додавати їх до коду: один зразок не здатен розкрити кожне необов'язкове поле, значення, що допускає null, чи enum, які може повернути реальне API, тому розширюйте типи там, де ваше знання предметної області підказує, що поле може бути відсутнім або набувати більше форм, ніж показує зразок.
Практичні поради
Надайте найповніший зразок, який маєте, бажано із заповненими необов'язковими полями та масивом із кількома елементами, щоб логіка об'єднання могла виявити union і необов'язковість. Перед генерацією перейменуйте кореневий інтерфейс відповідно до вашої доменної моделі. Після копіювання подумайте про уточнення занадто вільно виведених типів: замініть загальні поля string об'єднаннями літералів для відомих enum, позначте ідентифікатори як branded-типи, якщо ваш код їх використовує, і переконайтеся, що поле, яке інструмент типізував як null, не має натомість бути union із null. Виведення в браузері чудово підходить для швидкої першої чернетки, але фінальні типи повинні відображати контракт, від якого справді залежить ваш застосунок.
Як користуватися
- Вставте JSONДодайте репрезентативний зразок об'єкта або масиву JSON.
- Назвіть коріньОберіть назву кореневого інтерфейсу, а потім згенеруйте інтерфейси.
- Скопіюйте інтерфейсиПерегляньте виведений TypeScript і скопіюйте або завантажте його.