JSON'dan TypeScript arayüzleri üret _

JSON'dan TypeScript çıkarma nasıl çalışır?

Çıkarma, ayrıştırılan JSON ağacı üzerinde tek bir geçiştir. Araç her değeri okur, ona bir TypeScript türü seçer ve ardından bulduğu her nesne başına bir arayüz yazar.

1. JSON örneğini tarayıcının yerel ayrıştırıcısıyla ayrıştırın ve hatalı biçimlendirilmiş girişi satır/sütun ipucuyla reddedin.
2. Her değer için bir TypeScript türü koklayın — string, number, boolean, null, dizi veya iç içe nesne.
3. Her iç içe nesneye, üst özellik anahtarından türetilen bir arayüz adı verin (böylece user.address bir Address arayüzü olur).
4. {id: 1} ve {id: 2, label: "x"} listesinin doğru opsiyonel alanlara sahip bir birlik üretmesi için her dizi genelinde öğe türlerini birleştirin.
5. Seçeneklerinizi (arayüz ve tür, salt okunur, opsiyonel-null) uygulayın ve dosyanın öne referans olmadan derlenmesi için bildirimleri bağımlılık sırasında yayımlayın.

JSON'dan TypeScript türleri neden üretilir?

• Çoğu şekil hatası, yanıt türü yazılı ise derleme zamanında yakalanabilir. Gerçek bir yükten arayüz çıkarmak bunun büyük bölümünü sizin için yazar; `strict` mod ise belgelerin belirtmeyi unuttuğu alanı yakalar.
• Çıkarılan arayüzleri Zod veya io-ts gibi çalışma zamanı doğrulayıcısıyla eşleştirmek, aynı şekle iki iş verir: geliştirmede editör otomatik tamamlama ve prodüksiyon beklenmedik bir şey gönderdiğinde kenarda 400 yanıtı.
• TypeScript'in dil sunucusu yalnızca bildiği alanları gösterir. Çıkarılan arayüzü içe aktardığınızda, noktayı yazdığınız anda otomatik tamamlama çalışır — yanıta daha fazla `as any` dönüşümü ve repoda sinir bozucu grep yok.
• Bir OpenAPI spec yazmak üzereyseniz, çıkarılan arayüz yanıt şemasının hızlı bir ilk taslağıdır. Hâlâ elle yazılmış örneklere ve kısıtlamalara ihtiyaç duyacaksınız ancak özellik adları ve türler zaten doğru.

Yaygın uygulamalar

Çıkarma, gerçek bir yük var ama şema yokken en çok yardımcı olur.

• Bir işleyici yazmadan önce Stripe, GitHub veya Twilio'dan gelen üçüncü taraf webhook yüklerini yazımlama.
• Arka uç hazır olduğu gün ön uç ekibinin kodlamaya başlayabilmesi için dahili bir REST API'si için türleri önyükleme.
• Gözlemlenen bir API yanıtından Zod, io-ts veya Valibot şeması için başlangıç noktası üretme.

Çıktı nasıl görünür?

Bir örnek JSON belgesi ve kök adı verildiğinde üretici, iç içe nesne başına bir tane olmak üzere bir arayüz ağacı üretir. Kök adı User olan aşağıdaki giriş için:

{"id":1,"name":"Alice","tags":["a","b"],"address":{"city":"Paris"}}'i kök adı User ile yapıştırın; üretici şunu üretir:

export interface User {
  id: number;
  name: string;
  tags: string[];
  address: Address;
}

export interface Address {
  city: string;
}

Üretici seçenekleri

Bildirim stili

interface'i (nesne şekilleri için standart TypeScript deyimi) veya type'ı (daha sonra eşlenmiş türlere, koşullu türlere veya kesişimlere ihtiyaç duyarsanız kullanışlı) seçin. Her ikisi de özdeş çalışma zamanı davranışı üretir; seçim bir kodlama stili tercihidir.

Opsiyonel null olabilen alanlar

Örneklenen bir değer null olduğunda alanın türü T | null olur. Bu seçeneği açmak aynı zamanda bir ? değiştiricisi ekler; böylece alan TypeScript tarafında opsiyonel olur — API'nin null döndürmek yerine anahtarı tamamen bazen atladığı durumlarda kullanışlıdır.

Readonly değiştirici

Yayımlanan arayüzün değişmez bir veri modeliyle eşleşmesi için her özellik bildirimine readonly ekler. Redux durum dilimleri, dondurulmuş API yanıtları veya derleyicinin kazara mutasyonu işaretlemesini istediğiniz herhangi bir yer için kullanışlıdır.

İç içe nesneleri ve dizileri destekliyor mu?

Evet. Her iç içe nesne, üst özellik anahtarından türetilen adlandırılmış bir arayüz haline gelir ve diziler öğe türünü içeriklerinden çıkarır. Nesne dizileri, şekiller anlaşmazlık halindeyken nesne şekli başına bir arayüz alır ve birlik türleriyle.

Opsiyonel alanlar nasıl çıkarılır?

"Null olabilen alanları opsiyonel işaretle" geçişini açın; örneklenen değeri null olan herhangi bir alan, anahtarda ? değiştiricisi ve türde | null alır. Geçiş olmadan alan zorunlu kalır ve tür yalnızca T | null'dır.

Ayrımlı birlikleri destekliyor mu?

Temel birlik türleri, bir dizi karışık şekilli öğeler tuttuğunda veya bir alan hem bir değer hem de null taşıdığında ortaya çıkar. Tam ayrımlı birlik çıkarma (etiketi olarak type veya kind seçme ve varyantları ayırma) birden fazla örnek gerektirir — bu planlanmış ancak bugünkü yapıda yok.

Birden fazla JSON örneğinden tür çıkarabilir miyim?

Henüz değil — bugünkü çıkarıcı bir seferde bir örnek okur. Bir arayüzü paylaşması gereken iki yükünüz varsa (örneğin bir liste uç noktası ve tek öğe uç noktası), pratik geçici çözüm bunları tek bir dizide birleştirmek, oradan üretmek ve ardından elde edilen birlik türlerini yeniden adlandırmaktır. Çok örnekli çıkarma, yol haritasında yer alır çünkü bir yanıtta mevcut olan ve diğerinde olmayan alanları tespit etmenin tek yolu budur.

Bir yük yapıştırın, kökü adlandırın, arayüzleri kopyalayın. Tüm hat tarayıcınızda çalışır; dolayısıyla yayımlanmamış bir API veya imzalı webhook gövdesi makinenizde kalır.