JSON'dan TypeScript Arayüzüne

Nasıl çalışır?

Bir API'den gelen veriyi TypeScript'te tipli kullanmak için yanıtın arayüzünü yazmanız gerekir; alanlar çoğaldıkça elle yazmak hem uzun sürer hem de bir alanı unutmak kolaydır. Örnek yanıtı sol panele yapıştırın, kök tip adını yazın (ör. Musteri); tanımlar sağda oluşur. Her iç içe nesne kendi interface'ini alır: adres alanı Adres tipine, "siparisler" gibi bir nesne dizisi tekil adla (Siparis[]) yazılır. JSON bir diziyle başlıyorsa kök tip dizinin öğesidir ve ek olarak KokList = Kok[] satırı eklenir. Dizideki bütün kayıtlar tek tipe birleşir: bir kayıtta olmayan alan ? ile işaretlenir (eposta?: string), bir kayıtta null görülen alan | null alır (son_siparis: string | null). Farklı türler görülen alan birleşim tipi olur (string | number). Özellik adları JSON anahtarının aynısıdır, çünkü TypeScript tipi veriyi yeniden adlandıramaz; ad_soyad olduğu gibi kalır, "ad-soyad" gibi tanımlayıcı olamayan ad tırnakla yazılır. Boş dizinin öğe türü bilinmediği için unknown[] yazılır; örneğinize dolu bir kayıt eklerseniz tip netleşir.

Bu araç json to typescript, json to ts interface, json to typescript type aramalarıyla da biliniyor.

TypeScript interface nedir?

interface, TypeScript'te bir nesnenin hangi alanlara ve hangi türlere sahip olduğunu anlatan tanımdır: interface Adres { il: string; posta_kodu: string; }. Derleyici bu tanımı kullanarak yanlış yazılmış alan adlarını, eksik alanları ve tür uyuşmazlıklarını kod çalışmadan yakalar. Tanım derlemede silinir, JavaScript çıktısında yer almaz; yani veriyi çalışma anında doğrulamaz, yalnız geliştiriciyi uyarır.

Opsiyonel ve nullable alan nedir?

Opsiyonel alan (eposta?: string) nesnede hiç bulunmayabilir; okunduğunda undefined döner. Nullable alan (son_siparis: string | null) nesnede hep bulunur ama değeri null olabilir. JSON'da ikisi farklı görünür: birinde anahtar yoktur, diğerinde "son_siparis": null yazar. Bu araç ikisini ayrı işaretler, çünkü kodda ayrı kontrollerle karşılanırlar.

TypeScript'te interface ile type arasındaki fark nedir?

Nesne şekli tanımlarken interface ve type çoğunlukla aynı sonucu verir. interface extends ile genişletilir ve aynı adla ikinci kez yazılırsa iki tanım birleşir; bu, bir kütüphanenin tiplerine alan eklerken kullanışlıdır. type ise birleşim (string | number), kesişim ve takma ad yazabilir, ama aynı adla ikinci kez tanımlanamaz. API yanıtlarını tanımlamak için ikisi de uygundur; ekibinizin kod stilinde hangisi kullanılıyorsa onu seçin.

Eksik alan, null ve birleşim: tip nasıl çıkarılır

Araç tek bir örnekten çıkarım yapar; örnek ne kadar çok varyasyon gösterirse tip o kadar doğru olur. Dizideki kayıtlar birleşir ve her alan için iki ayrı soru sorulur: bu alan her kayıtta var mı, ve hiç null görüldü mü? İlkinin cevabı hayırsa alan opsiyoneldir (?), ikincisinin cevabı evetse tipe | null eklenir. İkisi farklı şeydir: eposta?: string alanın hiç gelmeyebileceğini, son_siparis: string | null ise alanın hep geldiğini ama boş olabileceğini söyler.

Bir alanda farklı türler görülürse birleşim yazılır: bir kayıtta 5, diğerinde "5" gelen alan string | number olur. Bu çoğu zaman API'deki bir tutarsızlığın işaretidir; tipi daraltmadan önce hangi durumun doğru olduğunu API belgesinden kontrol edin. Yalnız null görülen alanın türü bilinemez ve null yazılır.

• [{"a":1},{"b":2}] → a?: number; b?: number;
• {"x": null} ve {"x": "y"} → x: string | null
• {"n": 5} ve {"n": "5"} → n: string | number
• {"ad-soyad": "x"} → "ad-soyad": string

interface mi type mı; dürüst sınırlar

Nesne şekli tanımlamada ikisi de aynı işi görür. interface extends ile genişletilebilir ve aynı adla ikinci kez yazıldığında birleşir; kütüphane tiplerini genişletirken işe yarar. type ise birleşim (A | B), kesişim ve takma adlarla aynı yazımı paylaşır; ekibiniz her şeyi type ile yazıyorsa onu seçin. Çıktı her iki durumda da export ile başlar ve başka dosyadan import edilebilir.

Dürüst sınırlar: tarih metinleri ("2026-09-20") Date'e, sabit değer kümeleri ("aktif" | "pasif") birleşim sabitine çevrilmez, string kalır; bunları elle daraltın. Aynı şekle sahip iki iç içe nesne ayrı adlarla iki kez yazılabilir. TypeScript tipi çalışma anında veriyi doğrulamaz; API'nin gerçekten bu şekli döndüğünden emin olmak istiyorsanız zod gibi bir doğrulama kütüphanesi gerekir.

Sık sorulanlar

JSON'dan TypeScript interface nasıl oluşturulur?

Örnek JSON'u bu sayfanın sol paneline yapıştırın ve kök tip adını yazın. Sağ panelde her iç içe nesnesi ayrı interface olan, export ile başlayan TypeScript tanımları oluşur. Kodu kopyalayıp projenizde bir .ts dosyasına yapıştırın ve veriyi bu tiple kullanın.

Soru işaretli (?) alanlar ne anlama geliyor?

O alan dizideki bazı kayıtlarda hiç yok. TypeScript'te ? alanın gelmeyebileceğini söyler; kodda kullanmadan önce varlığını kontrol etmeniz gerekir. Alanın her zaman geleceğinden eminseniz "Eksik alanlar" seçeneğini Zorunlu yapın; o zaman ? eklenmez.

Alan adları neden camelCase'e çevrilmedi?

TypeScript tipi veriyi değiştirmez, yalnız şeklini anlatır; JSON'daki anahtar ad_soyad ise tipteki özellik de ad_soyad olmalıdır, yoksa derleyici gerçek veride olmayan bir alanı bekler. Adları dönüştürmek isterseniz bunu veriyi okuyan kodda yapmanız gerekir.

Yapıştırdığım JSON bir sunucuya gidiyor mu?

Hayır. Tip çıkarımı ve TypeScript kodunun yazılması tamamen tarayıcınızda yapılır; müşteri verisi içeren bir örnek yanıt bile bu sayfadan çıkmaz. Sayfa açıldıktan sonra internet olmadan da çalışır.