TypeScript Academy · Ders

Derin Değişmezlik Kalıpları

Özyinelemeli türlerle derinlemesine salt okunur yapılar oluşturun.

Derin Değişmezlik Kalıpları, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Sığ ve Derin Değişmezlik

readonly değiştiricisi sığdır: üst düzeyi korur, ancak iç içe nesneleri korumaz. Derin değişmezlik, en alt düzeye kadar her seviyenin salt okunur olması anlamına gelir. Bunu sağlamak ek çalışma gerektirir.

interface State { readonly user: { name: string }; }
const s: State = { user: { name: 'Ada' } };
// s.user = {...}; // Error (shallow protection)
s.user.name = 'Grace'; // allowed! nested field is mutable
console.log(s.user.name);

Sığ Değişmezlik Neden Yeterli Değil

Durum yönetimi ve paylaşılan veriler için sığ salt okunurluk, iç içe alanları açıkta bırakır. Bir yapının derinliklerinde gözden kaçan tek bir değişiklik, anlaşılması ve izlenmesi zor, ince hatalara yol açabilir.

interface Config { readonly db: { host: string; port: number }; }
const c: Config = { db: { host: 'localhost', port: 5432 } };
c.db.port = 9999; // mutates nested data despite readonly
console.log(c.db.port);

Özyinelemeli Bir DeepReadonly Türü

readonly değiştiricisini özyinelemeli olarak uygulayan bir eşlenmiş tür oluşturabiliriz. DeepReadonly<T> her özelliği dolaşır ve özellik bir nesneyse özyinelemeli olarak içine girer.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
console.log('DeepReadonly defined');

DeepReadonly Uygulama

Bir türü DeepReadonly ile sarmalamak, iç içe özellikleri de değişmez hâle getirir. Artık s.user.name bile yeniden atanamaz; koruma en alt düzeye kadar ulaşır.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
type State = DeepReadonly<{ user: { name: string } }>;
const s: State = { user: { name: 'Ada' } };
// s.user.name = 'x'; // Error now
console.log(s.user.name);

Eşlenmiş Tür Nasıl Çalışır

[K in keyof T] ifadesi her anahtarı dolaşır. readonly ön eki her birini kilitler. Koşullu T[K] extends object ? ... : T[K] ifadesi, özyinelemeli olarak devam edilip edilmeyeceğine veya ilkel bir türde durulup durulmayacağına karar verir.

type DeepReadonly<T> = {
  readonly [K in keyof T]: T[K] extends object
    ? DeepReadonly<T[K]>
    : T[K];
};
type Cfg = DeepReadonly<{ a: number; b: { c: string } }>;
const cfg: Cfg = { a: 1, b: { c: 'x' } };
console.log(cfg.a, cfg.b.c);

Yalnızca Derleme Zamanında Koruma

DeepReadonly, değişmezliği çalışma zamanında değil, tür sisteminde zorunlu kılar. JavaScript nesnesi tür bilgisi olmayan yollar üzerinden teknik olarak hâlâ değiştirilebilir; ancak tür bilgili kodunuz tamamen korunur.

// Type-level immutability does not freeze the runtime object.
// For runtime guarantees, combine it with Object.freeze.
console.log('Types guard your code; freeze guards runtime');

İç İçe Nesneleri Çalışma Zamanında Dondurma

Gerçek çalışma zamanı değişmezliği için Object.freeze kullanın. Bu, özelliklerin eklenmesini, kaldırılmasını veya değiştirilmesini engeller; ancak readonly gibi varsayılan olarak sığdır.

const config = Object.freeze({ host: 'localhost', port: 8080 });
console.log(config.port);
// In strict mode, config.port = 1 throws; otherwise silently ignored.

Derin Dondurma Yardımcısı

Çalışma zamanında derinlemesine dondurmak için iç içe nesneler boyunca özyinelemeli olarak ilerleyip her birini dondurun. Bu yaklaşım, uçtan uca değişmezlik için tür düzeyindeki DeepReadonly ile doğal bir şekilde birlikte çalışır.

function deepFreeze<T>(obj: T): T {
  Object.values(obj as any).forEach((v) => {
    if (v && typeof v === 'object') deepFreeze(v);
  });
  return Object.freeze(obj);
}
const frozen = deepFreeze({ a: { b: 1 } });
console.log(frozen.a.b);

Daha Güvenli Durum İçin Değişmezlik

Derin değişmezlik, öngörülebilir durumun temelidir. Veriler yerinde değiştirilemediğinde güncellemeler yeni nesneler oluşturmak zorunda kalır; böylece değişiklikler açıkça görülür ve kolayca izlenir.

const state = { count: 0, user: { name: 'Ada' } };
// Immutable update: create a new object instead of mutating
const next = { ...state, count: state.count + 1 };
console.log(state.count, next.count);

Değişmez Güncellemeler Deseni

Salt okunur verilerle yayma işlemi üzerinden yeni sürümler üretirsiniz. Her güncelleme yeni bir nesne olduğundan önceki durumlar bozulmadan kalır; bu, geri alma, zaman yolculuğuyla hata ayıklama ve değişiklik algılama için çok değerlidir.

type State = { readonly items: readonly string[] };
const s: State = { items: ['a'] };
const updated: State = { items: [...s.items, 'b'] };
console.log(s.items, updated.items);

Tür ve Çalışma Zamanı Güvenliğini Birleştirme

En güçlü yaklaşım her ikisini de kullanır: derleme zamanı güvenceleri için DeepReadonly ve çalışma zamanında uygulama için deepFreeze. Birlikte kullanıldıklarında yanlışlıkla değişiklik yapmayı neredeyse imkânsız hâle getirirler.

function freeze<T>(obj: T): T {
  return Object.freeze(obj);
}
const settings = freeze({ theme: 'dark', version: 2 });
console.log(settings.theme, settings.version);

Hızlı Kontrol

Derin değişmezlik konusunu anlayıp anlamadığınızı test edin.

Özet: Derin Değişmezlik

Şunları öğrendiniz:

readonly sığdır; iç içe alanlar değiştirilebilir kalır.
Özyinelemeli bir DeepReadonly<T> eşlenmiş türü, salt okunurluğu her seviyede uygular.
Bu yalnızca derleme zamanında geçerlidir; çalışma zamanında uygulamak için Object.freeze kullanın ve bunu derinlemesine uygulayın.
Değişmezlik, güncelleme sırasında kopyalama desenleri sayesinde güvenli ve öngörülebilir durum sağlar.

Böylece TypeScript Akademisi'nin gelişmiş türler ve değişmezlik eğitim yolu tamamlanır.

type State = { readonly value: number };
const s: State = { value: 1 };
const next: State = { ...s, value: s.value + 1 };
console.log(s.value, next.value);

Sıkça Sorulan Sorular

“Derin Değişmezlik Kalıpları” dersi ücretsiz mi?

Evet — “Derin Değişmezlik Kalıpları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Derin Değişmezlik Kalıpları” dersinde ne öğreneceğim?

Özyinelemeli türlerle derinlemesine salt okunur yapılar oluşturun. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Derin Değişmezlik Kalıpları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← TypeScript Academy Sayfasına Dön