tigtools

JSON به TypeScript

یک پاسخ یا فایل JSON بچسبانید و اعلان‌های TypeScript دریافت کنید که می‌توانید مستقیماً در کدتان قرار دهید.

در مرورگر شما اجرا می‌شود بدون ثبت‌نام

تعریف به‌صورت

نحوه استفاده

  1. JSON را در کادر ورودی بچسبانید، یک فایل .json باز کنید یا نمونه را امتحان کنید.
  2. نام نوع ریشه را تعیین کنید؛ مثلاً Order یا ApiResponse.
  3. اعلان‌های interface یا type و افزودن export و readonly را انتخاب کنید.
  4. TypeScript تولیدشده را کپی کنید یا آن را به‌صورت types.ts دانلود کنید.

نحوه کار

این مولد کل سند JSON را پیمایش می‌کند و نوع هر مقدار را در هر بخش ثبت می‌کند. هر شیء JSON به یک اعلان نام‌دار جداگانه تبدیل می‌شود. نام از کلید ویژگی به‌صورت PascalCase گرفته می‌شود؛ بنابراین «shipping_address» به ShippingAddress تبدیل می‌شود. اعضای آرایه بر اساس حالت مفرد کلید نام‌گذاری می‌شوند: «items» نام Item می‌گیرد، «categories» نام Category می‌گیرد و کلیدهایی که جمع به نظر نمی‌رسند پسوند «Item» می‌گیرند.

همه اشیاء داخل یک آرایه در یک اینترفیس ادغام می‌شوند. اگر کلیدی فقط در برخی از آن‌ها وجود داشته باشد، با علامت «?» اختیاری می‌شود. اگر مقداری در جاهای مختلف نوع‌های متفاوتی داشته باشد، نوع آن یک union مانند string | number خواهد بود. null به‌عنوان نوع جداگانه حفظ می‌شود؛ بنابراین فیلدی که گاهی null است string | null می‌شود. آرایه خالی unknown[] می‌شود، چون چیزی برای استنباط وجود ندارد. دو شیء با ویژگی‌ها و نوع‌های کاملاً یکسان یک اینترفیس مشترک دارند و اعلان تکراری ساخته نمی‌شود. کلیدهایی که شناسه معتبری نیستند، مانند «first-name»، داخل نقل‌قول قرار می‌گیرند.

نتیجه فقط نمونه‌ای را که جای‌گذاری کرده‌اید توصیف می‌کند. فیلدی که در واقعیت اختیاری است یا می‌تواند null باشد، اگر نمونه شما آن را نشان ندهد، اجباری و غیر null در نظر گرفته می‌شود و تاریخ‌ها به‌صورت رشته ساده می‌رسند. پیش از اتکا به این نوع‌ها، آن‌ها را با مستندات API خود بررسی کنید.

نمونه‌ها

نوع‌دهی پاسخ API

یک سفارش از API فروشگاه خود را با نام ریشه Order جای‌گذاری کنید. اینترفیس‌های Order، Customer، Item و Shipping را دریافت می‌کنید؛ با note?: string در Item چون فقط یکی از دو آیتم یادداشت دارد.

پیکربندی فقط‌خواندنی

یک config.json را جای‌گذاری کنید، گزینه «Make properties readonly» را فعال کنید و نتیجه را در config.d.ts قرار دهید تا نوشتن تصادفی روی پیکربندی توسط کامپایلر تشخیص داده شود.

آرایه در سطح بالا

یک endpoint فهرست، [{…}, {…}] برمی‌گرداند. با نام ریشه Product، خروجی با «export type Product = ProductItem[];» شروع می‌شود و پس از آن اینترفیس ProductItem می‌آید.

پرسش‌های متداول

چرا یک فیلد در خروجی اختیاری است؟

چون حداقل یکی از آبجکت‌های همان آرایه آن کلید را ندارد. اگر همه آبجکت‌ها آن را داشته باشند، الزامی می‌شود. برای دقیق‌تر شدن فیلدهای اختیاری، چند رکورد بچسبانید.

چرا نوع تاریخ string در نظر گرفته می‌شود؟

JSON نوع تاریخ ندارد؛ برای همین تاریخ‌ها به‌صورت string منتقل می‌شوند. مولد قالب‌ها را حدس نمی‌زند. اگر کدتان آن‌ها را به Date تبدیل می‌کند، نوع را خودتان تغییر دهید.

تفاوت interface و type چیست؟

برای شکل آبجکت‌ها تقریباً یکسان کار می‌کنند. interfaceها را می‌توان بعداً گسترش داد و با اعلان‌های بعدی ادغام کرد؛ type aliasها را نمی‌توان دوباره باز کرد. سبکی را انتخاب کنید که در کدبیس خودتان استفاده می‌کنید.

آیا می‌تواند اعتبارسنجی زمان اجرا مانند اسکیماهای Zod تولید کند؟

خیر. این ابزار فقط اعلان‌های TypeScript تولید می‌کند که در زمان کامپایل بررسی می‌شوند و داده‌ها را در زمان اجرا اعتبارسنجی نمی‌کنند.

حریم خصوصی

JSON شما فقط در مرورگر خودتان تحلیل می‌شود. هیچ چیزی آپلود، ذخیره یا در تحلیل‌ها استفاده نمی‌شود.