JSON to TypeScript Dönüştürücü

İkinci kayıtta patlayan elle yazılmış tip

API yanıtına bakıp interface'i elle yazmak ilk kayıtta kolay görünür. Alanları sırayla geçirirsiniz, editör susar, iş bitmiş sayılır. Sonra listenin ikinci kaydında note alanı hiç gelmez ve response.note.trim() çağrısı çalışma anında patlar. Tip dosyası hâlâ derleniyor, çünkü orada yazan şey verinin gerçeği değil, ilk kaydın fotoğrafı.

Neden bütün elemanları birleştirmek gerekiyor

Online çeviricilerin çoğu diziyi görünce ilk elemanı alır ve gerisini atar. Örnek veride ilk kullanıcının profil fotoğrafı varsa, tip avatar: string der; fotoğrafsız kullanıcıya geldiğinizde derleyici sizi uyarmaz çünkü tip zaten yanlış bilgi veriyor. Bu araç her elemandan çıkan şekli tek tek birleştiriyor: bir tarafta olup diğerinde olmayan alan isteğe bağlı işaretleniyor, aynı alan farklı tiplerde geliyorsa birleşim üretiliyor.

1// Girdi2[3  { "id": 1, "note": "ilk kayit", "score": 10 },4  { "id": 2, "score": "10" }5]6 7// İlk elemana bakan çevirici (yanlış)8interface Item { id: number; note: string; score: number }9 10// Bu aracın çıktısı11export type RootList = Root[];12 13export interface Root {14  id: number;15  note?: string;          // ikinci kayitta yok16  score: number | string; // gerçek bir tip çatışması17}

İç içe nesneler ayrı birer interface olarak üretiliyor, satır içine gömülmüyor. Üç kat derine inen anonim nesne edebiyatı okunmaz hale gelir ve başka bir yerden referans veremezsiniz. users gibi çoğul bir anahtar altındaki nesne User adını alır, çakışan isimler User2 gibi numaralandırılır. Kök seviyede dizi verirseniz eleman tipi ayrı bir interface, dizinin kendisi RootList gibi bir takma ad olarak çıkar; böylece hem tek kaydı hem listeyi ayrı ayrı tipleyebilirsiniz.

Üretilen tip bir sözleşme değil

Buradaki en önemli sınır şu: çıktı, verdiğiniz örneğin tarifidir. note?: string gördüğünüzde bunun anlamı "bu alan API tarafında isteğe bağlı" değil, "bu alan verdiğiniz örneğin bir kaydında yoktu". Belki alan gerçekten isteğe bağlı, belki de yalnızca örneğiniz eksik. Tersi de geçerli: örnekte her kayıtta bulunan bir alan zorunlu görünür, oysa API onu bazı durumlarda hiç göndermiyor olabilir. Bu yüzden örneği staging verisinden değil, mümkün olduğunca çeşitli gerçek kayıtlardan toplamak işe yarıyor.

İsteğe bağlı ile null aynı şey değil

TypeScript'te bu ikisi farklı durumları anlatır ve karıştırıldığında yanlış yerde kontrol yazarsınız. note?: string alanın hiç bulunmayabileceğini söyler, okuduğunuzda undefined gelir. note: string | null alanın her zaman bulunduğunu ama değerinin boş olabileceğini söyler. Bir veritabanı sütununun NULL olması ile API yanıtında o anahtarın hiç yer almaması farklı olaylar, JSON örneğinizde null gördüğünde bu araç birleşim üretir, anahtar hiç yoksa isteğe bağlı yapar.

Boş diziler ve unknown tercihi

Örnekte "tags": [] görürse araç eleman tipi hakkında hiçbir şey bilemez ve varsayılan olarak unknown[] üretir. any[] yerine unknown seçilmesinin sebebi şu: any üzerinde her işlem serbesttir, yani derleyici o noktadan sonra sizi hiç uyarmaz ve hata çalışma anına kadar saklanır. unknown ise kullanmadan önce tipi daraltmanızı zorunlu kılar, yani derleyici eksik bilgiyi görünür tutar. Ayarlar bölümünden any davranışına dönebilirsiniz ama varsayılanı değiştirmeden bırakmanızı öneririm.