Frontend Academy · Ders

Katı Mod ve any Kullanımını Kaldırma

4. ders / 414 adım

Katı Mod ve any Kullanımını Kaldırma, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Sıkı Mod Neden Kullanılmalı

tsconfig.json içindeki strict: true, her TypeScript güvenlik seçeneğini etkinleştirir ve ciddi projeler için temel ölçütü belirler. Null hatalarını, türü belirtilmemiş parametreleri ve güvenli olmayan atamaları derleme zamanında yakalar.

Sıkı Mod Neleri Etkinleştirir

Sıkı mod, şu üst düzey seçeneği etkinleştirir: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.

strictNullChecks

Bu seçenek olmadan null ve undefined her türe atanabilir; bu da sürekli hata kaynağıdır. Etkinleştirildiğinde null durumlarını açıkça ele almanız gerekir.

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

Tür ek açıklaması olmayan parametreler, bu seçenek olmadan varsayılan olarak any türünü alır ve tür sistemini sessizce devre dışı bırakır. noImplicitAny ile parametrelere tür ek açıklaması eklemeniz gerekir.

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

Kesin bir başlatıcısı olmayan sınıf özellikleri olası undefined olarak değerlendirilir. Bunları başlatın veya kesin atama işleci olan ! işlecini kullanın.

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

any Yerine unknown Kullanımı

any, tür denetimini devre dışı bırakır. unknown tür açısından güvenlidir; kullanmadan önce türünü daraltmanız gerekir. Her zaman unknown türünü tercih edin.

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

Tür İddialarını Güvenle Kullanma

İddiada bulunmanız gerekiyorsa (TS'den daha iyi bildiğiniz bir durum varsa) as söz dizimini tercih edin. Gerçekten başka seçeneğiniz yoksa x as unknown as T gibi iki kez iddiada bulunmayın; bu, kodda sorun olduğuna işaret eder.

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

Bir Projedeki any Kullanımını Ortadan Kaldırma

Yöntem: Sıkı modu etkinleştirin ve ortaya çıkan hataları her seferinde bir dosya olacak şekilde düzeltin. unknown türünü ve tür daraltmayı kullanın. Bilinen sorunlu noktalar için TODO yorumu içeren @ts-expect-error ekleyin; böylece bunlar göz ardı edilemez.

Lint Kuralı: no-explicit-any

Yeni any kullanımlarının eklenmesini engellemek için ESLint yapılandırmanıza @typescript-eslint/no-explicit-any ekleyin.

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

İşlev parametrelerinin karşıt varyantlı tür denetimini zorunlu kılar. Beklenenden daha geniş parametre türlerine sahip işlevlerin atanmasını önler; aksi durumda çalışma zamanında çökme yaşanabilir.

Yakala Değişkeninin Türü

useUnknownInCatchVariables, catch (e) içindeki e değişkeninin any yerine unknown olarak çıkarılmasını sağlar. Özelliklere erişmeden önce türü daraltmanız gerekir.

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

Geçiş İpuçları

Yeni projelerde ilk günden sıkı modu etkinleştirin. Eski projelerde seçenekleri aşamalı olarak etkinleştirin. En büyük kazanımı sağlayan strictNullChecks ile başlayın, ardından noImplicitAny seçeneğini etkinleştirin. Sorun düzeltildiğinde yorumun kaldırılmasını sağlamak için //@ts-ignore yerine //@ts-expect-error kullanın.

Hızlı Kontrol

Bir değerin türünü bilmediğinizde unknown neden any türünden daha güvenlidir?

İnteraktif derste cevapla

Özet: Sıkı Mod

Tam güvenlik için sıkı modu etkinleştirin. strictNullChecks, null durumlarının ele alınmasını zorunlu kılar. noImplicitAny, parametre türlerinin belirtilmesini gerektirir. Sınıf alanları için strictPropertyInitialization kullanın. any yerine unknown kullanın ve tür koruyucularıyla daraltın. İki kez yapılan tür iddialarından kaçının. no-explicit-any ile lint denetimi yapın. Eski kodu @ts-expect-error işaretçileri kullanarak her seferinde bir dosya olacak şekilde taşıyın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Katı Mod ve any Kullanımını Kaldırma” dersi ücretsiz mi?

Evet — “Katı Mod ve any Kullanımını Kaldırma” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Katı Mod ve any Kullanımını Kaldırma” dersinde ne öğreneceğim?

tsconfig içindeki tüm katı seçenekleri etkinleştirmeyi, any yerine unknown kullanmayı, tür zorlamalarını güvenli biçimde uygulamayı ve zayıf türlendirilmiş bir dosyayı katı türe taşımayı öğrenin. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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.

“Katı Mod ve any Kullanımını Kaldırma” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

Şablon Dize Türleri
Dekoratörler ve Üstveriler
React ile TypeScript: FC Genel Türleri ve Kancalar
Katı Mod ve any Kullanımını Kaldırma

← Frontend Academy Sayfasına Dön