JSON'dan TypeScript'e Dönüştürücü

Bir API yanıtı yapıştırın ve kullanıma hazır TypeScript interface'leri veya type alias'ları alın; iç içe tipler, isteğe bağlı alanlar ve null birleşimleri sizin için çıkarılır.

Tarayıcınızda çalışırKayıt gerekmezHiçbir şey yüklenmez

TypeScript

JSON'dan TypeScript'e nasıl kullanılır?

  1. Bir JSON örneğini (örneğin bir API yanıtını) sol kutuya yapıştırın veya bir .json dosyası açın.
  2. Kök tip adını belirleyin (örneğin User veya ApiResponse).
  3. interface veya type tanımlarından birini seçin; export, readonly veya tümü isteğe bağlı alanları açıp kapatın.
  4. Örnekten anlaşılamayan değerler (boş diziler ve null'lar gibi) için unknown (daha güvenli) veya any seçin.
  5. Oluşturulan kodu kopyalayın veya .ts dosyası olarak indirin.

Tipler nasıl çıkarılır?

  • İlkel değerler: dizeler, sayılar ve boolean'lar string, number ve boolean tiplerine eşlenir.
  • İç içe nesneler PascalCase ile adlandırılmış kendi interface'lerine dönüşür; billing_address, BillingAddress olur.
  • Nesne dizileri tekil adla adlandırılan tek bir öğe tipinde birleştirilir: users, User[] verir. Bazı öğelerde eksik olan bir anahtar isteğe bağlı olur (key?:).
  • Null değerler o anahtar için görülen diğer değerlerle birleşir: string | null. Yalnızca null olan bir anahtar unknown veya any tipine düşer.
  • Karışık diziler (number | string)[] gibi union dizilerine dönüşür.
  • Aynı yapılar bir kez tanımlanıp yeniden kullanılır; aynı adı alacak farklı yapılara sayısal bir sonek eklenir.
  • Geçerli tanımlayıcı olmayan anahtarlar, örneğin "first-name" veya "2fa", tırnak içine alınır.

interface mi, type mı?

Düz nesne yapıları için ikisi neredeyse birbirinin yerine kullanılabilir. interface tanımları genişletilebilir ve birleştirilebilir, ayrıca biraz daha anlaşılır derleyici hataları verir. type alias'ları ise union ve mapped type'ları da ifade edebilir. Birçok ekip API modelleri için interface, geri kalan her şey için type kullanır; kod tabanınızın veya linter'ınızın (@typescript-eslint/consistent-type-definitions) beklediğini seçin.

Örneğinizden daha iyi tipler alın

Tipler ancak örnek kadar eksiksiz olabilir. Oluşturucunun isteğe bağlı ve nullable anahtarları tespit edebilmesi için isteğe bağlı alanları içeren bir yanıt ya da birkaç farklı öğe içeren bir dizi yapıştırın. Tarihler ve enum'lar gibi değerler JSON'da düz dize olarak gelir; bunları sonrasında elle daraltın, örneğin status: 'active' | 'disabled'. Çalışma zamanı doğrulaması için oluşturulan tipleri Zod gibi bir şema kütüphanesiyle birlikte kullanın.

Sıkça sorulan sorular

JSON'um yükleniyor mu?
Hayır. Tipler tarayıcınızda JavaScript ile oluşturulur. Token veya kişisel veri içeren API yanıtları cihazınızdan asla çıkmaz.
İsteğe bağlı özellikler nasıl tespit ediliyor?
Aynı dizideki nesnelerin anahtarları farklı olduğunda, en az bir nesnede eksik olan anahtarlar ? ile isteğe bağlı olarak işaretlenir. Tek bir nesnede, Tümü isteğe bağlı'yı işaretlemediğiniz sürece her anahtar zorunludur.
<code>unknown</code> mı yoksa <code>any</code> mi kullanmalıyım?
unknown daha güvenlidir: TypeScript, değeri kullanmadan önce daraltmanızı zorunlu kılar. any ise o değer için tip denetimini kapatır. Yalnızca tipleri daha sonra iyileştirmeyi planlıyorsanız kullanın.
ISO tarihi neden <code>string</code> olarak tipleniyor?
JSON'da tarih tipi yoktur, bu yüzden tarihler aktarımda dize olarak gelir. Ayrıştırdıktan sonra bunları new Date() ile dönüştürüyorsanız modelinizde özelliği Date olarak değiştirin.
Büyük veya derin iç içe JSON'ları işleyebilir mi?
Evet. Üretim süresi girdinin boyutuyla doğrusal olarak artar ve yerel olarak çalışır; bu yüzden birkaç megabaytlık yanıtlar bile bir saniyeden çok daha kısa sürede dönüştürülür.

İlgili araçlar

JSON Formatter JSON'u güzelleştirin, küçültün ve satır/sütun hatalarıyla doğrulayın. JSON Diff İki JSON nesnesini karşılaştırın, değişiklikleri yola göre listeleyin. YAML'dan JSON'a YAML yapılandırmalarını çok belge desteği ve net hatalarla JSON'a çevirin. cURL Dönüştürücü curl komutlarını fetch, Axios, Python, Go veya PHP koduna çevirin.