JSON'dan TypeScript'e

JSON'dan TypeScript'e Dönüşüm Nedir?

Bir JSON yükü yapıştırın, karşılığında TypeScript arayüzleri alın — bir nesnenin tam olarak hangi özelliklere sahip olduğunu ve her birinin hangi türü taşıdığını tanımlayan türlendirilmiş sözleşmeler. Bunlar olmadan JSON.parse() ile gelen veriler any olarak gelir; bu da sizi editör desteğinden ve özellik erişimi ya da atama sırasındaki derleyici denetimlerinden yoksun bırakır. JSON'dan TypeScript'e dönüştürmek, arayüzleri elle yazmadan bu güvenliği sağlar.

TypeScript, altı JSON değer türünün tamamını kapsar: string, number, boolean, null, object ve array. İç içe her JSON nesnesi kendi adlandırılmış arayüzüne dönüşür. Diziler ilk elemanlarından türlenir. Sonuç, JSON.parse() çalışma zamanında gerçekte neyi döndürüyorsa onu yansıtır; bu nedenle arayüzler tahmine değil gerçek veriye dayanır.

Büyük veya derin iç içe JSON için arayüzleri elle yazmak hem zahmetli hem de hata yapmaya açıktır. JSON'dan TypeScript üretici, yapıyı otomatik olarak okur, iç içe geçmeyi özyinelemeli olarak işler ve saniyeler içinde temiz arayüz kodu çıkarır. Bu özellikle tanıdık olmayan bir API'yi entegre ederken, sahte verilerle prototip oluştururken veya bir JavaScript kod tabanını TypeScript'e taşırken çok kullanışlıdır. Aynı zamanda sizi iç içe özellik adlarını ve türleri elle takip etmekten kurtarır; böylece tür şablonu yerine uygulama mantığına odaklanabilirsiniz.

Neden JSON'dan TypeScript Üretici Kullanmalısınız?

TypeScript arayüzlerini elle oluşturmak küçük nesneler için pratikken, iç içe yapılarda veya büyük API yanıtlarında hızla zorlaşır. 50 alanlı ve üç iç içe katmanlı bir API yanıtı düşünün — bunu elle yazmak, her biri olası bir yazım hatası veya atlanmış null olabilir alan kaynağı olan düzinelerce arayüz demektir. Otomatik bir üretici tüm seti milisaniyeler içinde oluşturur ve kodunuz ile tükettiği veri arasındaki tür uyumsuzluğu olasılığını azaltır. Doğruluğun ötesinde, türlerinizi gerçek API sözleşmesiyle uyumlu tutar. Bir servis yanıt yapısını değiştirdiğinde güncellenmiş JSON'ı yapıştırın ve yeniden oluşturun — elle yazılmış bir arayüz dosyasında değişen her özelliği arayıp bulmaktan çok daha hızlıdır.

JSON'dan TypeScript'e Kullanım Senaryoları

JSON'dan TypeScript'e Tür Eşleme Başvurusu

Her JSON değeri bir TypeScript türüne eşlenir. Aşağıdaki tablo, her JSON ilkelinin ve yapısal türünün nasıl çevrildiğini gösterir. Bu eşleme ECMA-404 JSON standardını ve TypeScript'in yerleşik türlerini izler.

TypeScript interface ve type Alias Karşılaştırması

TypeScript, nesne şekillerini tanımlamak için iki yol sunar: interface bildirimleri ve type alias'ları. Her ikisi de JSON yapılarını temsil etmek için kullanılır ancak genişletme ve birleştirme davranışları bakımından farklılaşır. Çoğu JSON'dan TypeScript üretici, TypeScript'te nesne şekilleri için alışılmış seçim oldukları için arayüzler çıkarır.

Kod Örnekleri

Aşağıda, farklı dil ve araçlarda JSON'dan TypeScript arayüzleri oluşturmaya ilişkin örnekler bulunmaktadır. Her kod parçacığı çalıştırılabilir çıktı üretir.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Sıkça Sorulan Sorular