ProgramlamaFrontend geliştirici

TypeScript'te geri çağırma (callback) fonksiyonunu nasıl doğru bir şekilde tipleriz ve bağlamla (context) ve tür hatalarıyla çalışırken hangi tuzakları göz önünde bulundurmamız gerekir?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap.

Sorunun geçmişi: JavaScript'te geri çağırma fonksiyonları her yerde kullanılıyor, ancak imzaları genellikle belirsizdir. TypeScript'te parametrelerin ve dönen değerin türünü açıkça belirtmek önemlidir; aksi takdirde Tür güvenliğinde kolayca boşluklar ortaya çıkabilir.

Sorun: Yanlış veya belirsiz bir tip tanımı, argümanlar ve sonuç için belirsiz türlere yol açar, bağlamla (this) çalışmayı zorlaştırır, derleyici tarafından hata kontrolünü bozabilir ve yeniden yapılandırmayı zorlaştırabilir.

Çözüm: Geri çağırma fonksiyonunun türünü açıkça tanımlamak, geçirilen parametrelerin türlerini belirtmek, isteğe bağlı argümanları ve dönen değeri uygun şekilde ele almak ve gerekiyorsa bağlamın türünü açıkça tanımlamak gereklidir.

Kod örneği:

type Callback = (error: Error | null, result?: string) => void; function doAsyncWork(data: string, cb: Callback): void { setTimeout(() => { if (data === '') cb(new Error('Boş string')); else cb(null, data.toUpperCase()); }, 100); }

Ana özellikler:

  • Geri çağırma fonksiyonunun tüm parametre türlerini her zaman belirtin.
  • Dönen türü, hatta void olsa bile tanımlayın.
  • Gerektiğinde this'in türünü açıkça tanımlayın (örneğin, bağlamla bir fonksiyonla).

Kandırmaca soruları.

Geri çağırmanın dönen değer türü belirtilmezse ne olur?

TypeScript, her türlü dönen türü kabul eder (örneğin, undefined, void, Promise), bu da asenkron zincirlerde veya "varsayılan" değerlerin döndürülmesinde sürprizlere yol açabilir.

type BadCallback = (data: string) => any; // her türlü sonuç, kontrol yok

Geri çağırmayı Function veya (...args: any[]) => any şeklinde yazmak mümkün mü?

Hayır. Bu, tüm tür korumasını ortadan kaldırır, parametrelerin sayısı, türleri ve dönen tür hakkında bilgi kaybolur. Bu yaklaşım, TypeScript'ten tamamen vazgeçmekten daha maliyetlidir.

this bağlamıyla bir fonksiyonu nasıl tipleriz?

Fonksiyonun imzasında ilk parametre olarak this kullanın veya bind aracılığıyla türü dönüştürün. Örnek:

interface ClickCallback { (this: HTMLElement, event: MouseEvent): void; } const handler: ClickCallback = function (event) { this.textContent = 'ok'; };

Tür hataları ve anti-patentler

  • Tiplenmemiş geri çağırmalar (any veya Function)
  • Fonksiyon imzasında dönen tür eksikliği
  • this türü uyumsuzluğu, rastgele çalışma zamanı hatalarına yol açar

Gerçek hayattan bir örnek

Olumsuz durum

Projede geri çağırma (...args: any[]) => any olarak tanımlandı. İş mantığı güncellendiğinde imza değişti, geri çağırma gerekli argümanları geçmeyi bıraktı, hatalar sadece üretimde ortaya çıktı.

Artılar:

  • Üçüncü taraf kodları derlemek ve entegre etmek daha kolaydır.

Eksiler:

  • Tür seviyesinde koruma yok
  • Güncellemelerde zorluklar

Olumlu durum

Sıkı türler getirildi: geri çağırma arayüzlerini tanımladık, this türünü ve dönen türü açıkça belirttik. Derleyici hataları dağıtımdan önce yakalamaya başladı, yeniden yapılandırma ve hata düzeltme daha kolay hale geldi.

Artılar:

  • Tür güvenliği
  • İmza değişikliklerinin derleme zamanında kontrolü

Eksiler:

  • Tipleme biraz zorlaştı, boilerplate miktarı arttı.