JSON'dan TypeScript'e

Gerçek verilerden yazılan modeller

Otomatik olarak çıkarılan iç içe nesneler, diziler, birleşimler ve isteğe bağlı özelliklerle herhangi bir JSON'u anında TypeScript arayüzlerine veya türlerine dönüştürün.

TypeScript arayüzlerini bir API yanıtıyla eşleştirmek için elle yazmak sıkıcı ve hataya açık bir işlemdir. Bir JSON verisi yapıştırdığınızda bu araç, doğru yazılmış alanlar, nesneler için iç içe geçmiş arayüzler ve dizi öğesi türleri ile eşleşen bir arayüz (veya tür takma adı) oluşturarak yapıyı yönlendirir. Karışık diziler birleşim türleri haline gelir, böylece modelleriniz verileri tam olarak yansıtır.

Özellikler

Arayüzler oluşturun veya takma adlar yazın
İç içe geçmiş nesneleri ve dizileri işler
Karışık dizilerden birleşim türlerini çıkarır
Boş değerler için isteğe bağlı özellikler
Özel kök türü adı
Yerel olarak çalışır: kod hiçbir zaman yüklenmedi

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

1
JSON'u yapıştır
Bir nesneyi veya veri dizisini bırakın.
2
Seçenekleri ayarla
Arayüz veya türü seçin, kökü adlandırın, isteğe bağlı olarak geçersiz değerleri işaretleyin.
3
Türleri gözden geçirin
İç içe arayüzler otomatik olarak oluşturulur.
4
Kopyala
TypeScript'i projenize kopyalayın.

Yaygın kullanım durumları

Hızla bir API yanıtı yazın
JSON fikstüründen modeller oluşturun
Bir yapılandırma dosyası için arayüzler oluşturma
Yeni bir entegrasyon için önyükleme türleri

Ayrıntılı kılavuz

Çıktıyı tarzınıza göre ayarlayın

Arabirimleri mi yoksa takma adları mı yazacağınızı seçin, kök türünü adlandırın ve isteğe bağlı olarak null yapılabilir alanları isteğe bağlı olarak işaretleyin. Oluşturulan kod güncellenir ve projenize yapıştırılmaya hazırdır. Bunların hepsi tarayıcınızda çalışır, dolayısıyla özel API yükleri ve dahili şemalar makinenizden asla ayrılmaz.

Türler nasıl çıkarılır?

Dönüştürücü, JSON'unuzu okur ve her değeri bir TypeScript türüyle eşler: dizeler, sayılar ve boolean'lar dizeye, sayıya ve boolean'a dönüşür, iç içe geçmiş nesneler kendi adlandırılmış arayüzleri haline gelir ve diziler, yazılan diziler haline gelir. Bir dizi farklı türde değerler tuttuğunda sonuç (string | number)[] gibi bir birleşim olur. Örnek ayarlandığında alanın ne tuttuğunu gösteremediği için boş bir değer boş olur. "Ad" gibi geçerli tanımlayıcılar olmayan özellik adları, çıktının her zaman derlenmesi için tırnak içine alınır.

Örnek verilerden doğru türleri alma

Çıkarılan türler yalnızca örnek kadar iyidir. Bazı API yanıtlarında bir alan eksikse, bunu isteğe bağlı olarak ? oluşturduktan sonra ve eğer bir alan üretimde boş olabiliyorsa, onu string olarak genişletin | hükümsüz. İdeal olarak tüm isteğe bağlı alanların mevcut olduğu, bulabileceğiniz en kapsamlı yanıtı kullanın. Kontrol etmediğiniz API'ler için, oluşturulan türleri çalışma zamanı doğrulamasıyla eşleştirin (örneğin Zod veya io-ts), çünkü TypeScript türleri çalışma zamanında kaybolur ve değiştirilmiş bir API'yi yakalamaz. Tarihler JSON'a dizeler halinde gelir; dolayısıyla, Date nesnelerine ihtiyacınız varsa bunları kendiniz dönüştürün.

Sık sorulan sorular

JSON'u TypeScript arayüzüne nasıl dönüştürebilirim?

JSON'unuzu yapıştırdığınızda araç anında eşleşen bir arayüz oluşturarak nesneler için iç içe arayüzler oluşturur ve dizi öğesi türlerini çıkarır. Doğrudan kodunuza kopyalayın.

İç içe geçmiş nesneleri ve dizileri işliyor mu?

Evet. İç içe geçmiş nesneler kendi adlandırılmış arayüzleri haline gelir ve diziler, öğeleri tarafından yazılır. Karışık türlere sahip diziler (string | number)[] gibi bir birleşim üretir.

Arayüzler yerine tür takma adları alabilir miyim?

Evet: 'arayüz' bildirimleri yerine 'tür' takma adları verme seçeneğini değiştirin ve kök türünü projenize uyacak şekilde yeniden adlandırın.

JSON'um herhangi bir yere yüklendi mi?

Hayır. Ayrıştırma ve oluşturma tamamen tarayıcınızda gerçekleşir, dolayısıyla hassas veriler cihazınızdan asla ayrılmaz.

JSON'dan TypeScript arayüzlerini nasıl oluşturabilirim?

JSON'unuzu yapıştırın (örneğin bir API yanıtı), köke bir ad verin; araç türleri çıkarır ve iç içe geçmiş nesneler ve diziler de dahil olmak üzere kullanıma hazır arayüzler üretir. Yerel olarak çalışır, böylece gerçek yükler gizli kalır.

İç içe geçmiş nesneleri ve isteğe bağlı özellikleri işliyor mu?

Evet. İç içe yapılar kendi adlandırılmış arayüzleri haline gelir, diziler öğe türleri alır ve türlerin gerçek, bazen eksik verilerle eşleşmesi için alanları isteğe bağlı olarak işaretleyebilirsiniz.

Arayüz yerine bir tür takma adının çıktısını alabilir miyim?

Evet. Kod tabanınızın stiline bağlı olarak arayüz veya tür çıktısını seçin; her ikisi de, çıkarılan JSON şeklinden doğru TypeScript üretir.

Gerçek verilerden yazılan modeller

Özellikler

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

JSON'u yapıştır

Seçenekleri ayarla

Türleri gözden geçirin

Kopyala

Yaygın kullanım durumları