DevToolPal
TR

JSON'dan TypeScript'e

Bir JSON örneğinden iç içe türler, isteğe bağlı alanlar ve null desteğiyle TypeScript arayüzleri veya türleri üretir.

Yerelde çalışır, asla yüklenmez

Seçenekler

Bildirim türü
Null değerler

JSON

0 karakter · 0 B

TypeScript

0 karakter · 0 B

Ne işe yarar

JSON’dan TypeScript’e üretici, bir API yanıtı veya yapılandırma dosyası gibi bir JSON örneğini okur ve onu tanımlayan TypeScript arayüzlerini yazar. Her alanı elle yazmak yerine gerçek bir yanıtı yapıştırırsınız ve fetch sonuçları, Redux durumu ya da test verileri için koda doğrudan koyabileceğiniz türler elde edersiniz.

Üretici yalnızca ilk değere değil, her değere bakar. Sayılar number, metinler string olur, iç içe nesneler kendi arayüzlerini alır ve dizi öğeleri birleştirilir; böylece yalnızca bazı öğelerde bulunan bir alan isteğe bağlı, bazen null olan bir alan null olabilir olarak türlendirilir.

Nasıl kullanılır

  1. JSON’ı giriş alanına yapıştırın, bir .json dosyası yükleyin veya Örnek düğmesine tıklayın.
  2. Kök tür adını belirleyin ve stili seçin: interface veya type, null için | null ya da isteğe bağlı alanlar, readonly özellikler ve her bildirime export eklenip eklenmeyeceği.
  3. TypeScript’i kopyalayın veya .ts dosyası olarak indirin.

Geçersiz JSON, sorunun satır ve sütunuyla bildirilir; böylece örneği hemen düzeltebilirsiniz.

Örnek

Bu JSON:

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

şu bildirimlere dönüşür:

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

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

İpuçları

  • Tek bir örnek yalnızca içerdiğini gösterir. Bir alan metin veya null olabiliyorsa ikisinden de örnek ekleyin ya da birleştirilmeleri için birkaç örneği bir diziye koyun.
  • first-name gibi geçerli tanımlayıcı olmayan alan adları tırnak içinde yazılır, bu yüzden çıktı her zaman derlenir.
  • Sonuç bir başlangıç noktasıdır. Örnekten fazlasını biliyorsanız metin alanlarını değişmez değer birleşimlerine veya Date türüne daraltın.
  • Go mu lazım? JSON’dan Go’ya dönüştürücü aynı çıkarımı kullanarak json etiketli yapılar yazar.

SSS

› İç içe nesneler nasıl ele alınır?

Her iç içe nesne, anahtarının PascalCase biçiminden adlandırılan ayrı bir arayüz olur; yani address alanı Address arayüzünü üretir. Yapısı tamamen aynı olan nesneler tek bir arayüzü paylaşır, çakışan adlara Address2 gibi bir numara eklenir.

› Diziler nasıl türlendirilir?

Bir dizinin tüm öğeleri tek bir öğe türünde birleştirilir. Nesne dizisi, anahtarın tekil hâliyle adlandırılan bir arayüzün dizisi olur; orders Order[] verir. Karışık diziler (string | number)[] gibi bir birleşim türüne, boş diziler unknown[] türüne dönüşür.

› Bir alan ne zaman isteğe bağlı işaretlenir?

Bir dizideki bazı nesnelerde eksik olduğunda. Her yerde bulunan ama bazen null olan bir alan varsayılan olarak T | null şeklinde yazılır. Null değerleri isteğe bağlıya çevirirseniz null kaldırılır ve alan soru işaretiyle isteğe bağlı olarak işaretlenir.

› interface mi type mı seçmeliyim?

İkisi de aynı nesne biçimlerini tanımlar. Arayüzler genişletilip birleştirilebilir ve birçok stil rehberi nesne türleri için onları önerir. Sonucu birleşim veya eşlenmiş türlerle birleştirmeyi planlıyorsanız type takma adları kullanışlıdır. Kod tabanınız neyi kullanıyorsa onu seçin.

› JSON'ım bir sunucuya gönderiliyor mu?

Hayır. Türler tarayıcınızda çıkarılır, bu yüzden gerçek API yanıtlarını güvenle yapıştırabilirsiniz.