JSON'dan TypeScript'e
Bir JSON örneği yapıştırın; araç, yapısına uyan TypeScript arayüzlerini çıkarımlar. Alanların tipi gözlemlenen değerlere göre belirlenir (string, number, boolean, Array<T>); iç içe nesneler kendi adlandırılmış arayüzlerini alır; null veya eksik olarak gözlemlenen alanlar ise tercih ettiğiniz stile göre isteğe bağlı (?) ya da null olabilir (| null) hâle gelir.
JSON'ı TypeScript'e nasıl dönüştürürsünüz
-
1
JSON'ı yapıştırın
Tek bir örnek yeterlidir, ancak birden çok örnek null olabilirlik ve birleşim tipi çıkarımını iyileştirir.
-
2
Çıktı stilini seçin
`interface` (varsayılan), `type` takma adı veya tüm alanları `readonly` olarak işaretlenmiş salt okunur arayüz.
-
3
İsteğe bağlılık stratejisini seçin
Alanı `?` (bulunmayabilir) ya da `| null` (her zaman var, ama null olabilir) olarak işaretleyin.
-
4
Tipleri kopyalayın
Bir `.ts` dosyasına yapıştırın; API yanıtına güçlü tiplenmiş erişim elde edin.
Örnek
Giriş:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
Çıktı:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
Tip eşlemesi
| JSON | TypeScript |
|---|---|
| karakter dizisi | string |
| tam sayı / ondalık sayı | number |
| mantıksal değer | boolean |
| yalnızca null | null |
| null + T | T | null (veya T?) |
| T dizisi | T[] |
| karışık dizi | (T1 | T2)[] |
| nesne | Adlandırılmış iç içe arayüz |
| boş dizi | unknown[] (çıkarılamaz) |
İsteğe bağlı alan ile null olabilen alan
foo?: string, bu alan nesnede bulunmayabilir.undefineddenetimi uygulanır.foo: string | null, bu alan her zaman vardır, ancak açıkça null olabilir.foo?: string | null, bulunmayabilir VEYA null olabilir.
JSON’ın kendisinde undefined yoktur; ancak API’ler alan yokluğunu farklı şekillerde bildirir. Kullandığınız API’nin anlamlarıyla eşleştirin.
- REST API’ler genellikle eksik alanları atlar ->
?:. - GraphQL istenen her alanı her zaman döndürür ->
| null. - Bazı SDK’ler farklı bağlamlarda her ikisini de kullanır.
Birleşim tipleri ile literal tipler
Araç, aynı karakter dizisi alanının örnekler boyunca yalnızca küçük bir değer kümesi aldığını görürse ("status": "pending", "active", "archived"), bir karakter dizisi literal birleşimi üretebilir:
status: "pending" | "active" | "archived";
Bunu istiyorsanız “karakter dizisi literal birleşimlerini çıkarım” seçeneğini etkinleştirin.
Yaygın hatalar
- Tek bir örnekten çıkarım yapmak. Her alan zorunlu hâle gelir; null olabilirlik gözlemlenemez. Daha iyi tipler için 5-10 çeşitli örnek verin.
- Boş diziler.
"tags": []hiçbir tip bilgisi vermez, üreticiunknown[]çıkarır. En az bir öğe içeren bir örnek sağlayın. - Karışık tipli diziler.
[1, "two", true]şunu üretir:(number | string | boolean)[]. Bu genellikle JSON’ın tiplenmesi yerine yeniden tasarlanması gerektiği anlamına gelir. - Sayısal karakter dizisi anahtarları. JSON
{"1": "a", "2": "b"}TypeScript’te hâlâ bir nesnedir (Record<string, string>), dizi değildir. Üretici bunu doğru şekilde işler.
Sık Sorulan Sorular
API’nizle eşleştirin. Null alanları atan REST API’ler için ?: uygundur. Seçilen her alanı her zaman döndüren GraphQL için | null uygundur. Kararsız kaldığınızda, zorunlu söz dizimiyle T | null daha katıdır ve derleme sırasında daha çok hata yakalar.
Evet; bunu etkinleştirir ve birden çok örnek sağlarsanız, örnekler boyunca 2-5 farklı karakter dizisi değeri gözlemlenen bir alan literal birleşim olarak çıkarılır. Bu eşiğin üzerinde string’e geri döner.
Çoğu durumda interface, genişletmeye açıktır ve TypeScript onu daha iyi optimize eder. type takma adları birleşimler, kesişimler, demetler (tuple) ve eşlenmiş (mapped) tipler için kullanışlıdır. JSON’dan türetilen tipler için ikisi de işe yarar; bir proje kuralı belirleyin.
Evet. İç içe her nesne, adı anahtardan türetilen kendi arayüzüne dönüşür (user.address -> Address). Çok derin veya tekrar eden yapılar için bir JSON Schema ve özel bir schema-to-TS üreticisi kullanmayı düşünün.
İlgili Araçlar
FPS Sayacı
requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.
Webpack Yapılandırma Oluşturucu
Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.
Dosya Boyutu Dönüştürücü
Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.
Telefon numarası doğrulayıcı
Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.
Kurgusal telefon numarası oluşturucu
Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.
Rastgele adres oluşturucu
Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.
Araç diğer dillerde mevcuttur
- JSON naar TypeScript [NL]
- JSON a TypeScript [ES]
- JSON เป็น TypeScript [TH]
- تحويل JSON إلى TypeScript [AR]
- JSON para TypeScript [PT]
- JSONからTypeScriptへ [JA]
- JSON에서 TypeScript로 [KO]
- JSON do TypeScript [PL]
- JSON till TypeScript [SV]
- JSON zu TypeScript [DE]
- JSON sang TypeScript [VI]
- JSON ke TypeScript [ID]
- JSON vers TypeScript [FR]
- JSON a TypeScript [IT]
- JSON в TypeScript [RU]
- JSON 转 TypeScript [ZH]
- JSON to TypeScript [EN]