Callback va higher-order funksiyalar tiplari

~15 daq · TypeScript · Funksiyalar

Voqea tinglovchi funksiyasini yozmoqchisiz — tugma bosilganda nima bo'lishi kerakligini tashqaridan berasiz:

function tugmaQo_sh(element, callback) {
  element.addEventListener("click", callback);
}

tugmaQo_sh(btn, (voqea) => {
  voqea.targer.textContent = "Bosildi"; // typo: targer emas, target
});

callback uchun tur belgilanmagan — voqea.targer xatosi yozilayotganda ko'rinmadi. TypeScript da callback turi aniq belgilanadi.

Callback turi

Funksiya turi (parametrlar) => qaytishTuri ko'rinishida yoziladi:

function tugmaQo_sh(
  element:  HTMLButtonElement,
  callback: (voqea: MouseEvent) => void
): void {
  element.addEventListener("click", callback);
}

tugmaQo_sh(btn, (voqea) => {
  voqea.target;   // ✅ — TypeScript biladi
  voqea.targer;   // ❌ — xato darhol ko'rinadi
});

Funksiya turini type bilan nomlash

Bir xil funksiya turi ko'p joyda ishlatilsa — nom berish qulay:

type Tinglovchi = (voqea: MouseEvent) => void;
type Hisoblash  = (a: number, b: number) => number;
type Shart      = (element: unknown) => boolean;

function qoshish(tinglovchi: Tinglovchi): void {
  document.addEventListener("click", tinglovchi);
}

const filter = (shart: Shart) => (massiv: unknown[]) => massiv.filter(shart);

Higher-order funksiya — funksiya qaytaradigan funksiya

Funksiya qaytaruvchi funksiya — qaytish turi ham funksiya turi:

function ko_paytiruvchi(son: number): (x: number) => number {
  return (x) => x * son;
}

const ikkilash   = ko_paytiruvchi(2);
const uchlashtir = ko_paytiruvchi(3);

ikkilash(5);    // 10
uchlashtir(5);  // 15

ko_paytiruvchi ning qaytish turi: (x: number) => number — funksiya.

Generic callback

Turni chaqirilishda aniqlanadigan qilish:

function o_zgartir<T, U>(
  massiv:    T[],
  o_zgartirish: (element: T) => U
): U[] {
  return massiv.map(o_zgartirish);
}

const sonlar = o_zgartir([1, 2, 3], (n) => n * 2);
// TypeScript: number[] — T=number, U=number

const matnlar = o_zgartir([1, 2, 3], (n) => `${n}-son`);
// TypeScript: string[] — T=number, U=string

TypeScript T va U ni chaqirilishda avtomatik aniqlaydi — annotatsiya shart emas.

Array metodlari — callback turlari

map, filter, reduce — ichidagi callback TypeScript tomonidan tekshiriladi:

const mahsulotlar: Mahsulot[] = [...];

// map — har element uchun
const nomlar: string[] = mahsulotlar.map((m) => m.nomi); // ✅

// filter — boolean qaytarishi kerak
const arzonlar = mahsulotlar.filter((m) => m.narxi < 1_000_000); // ✅

// reduce
const jami: number = mahsulotlar.reduce((s, m) => s + m.narxi, 0); // ✅

Tez-tez uchraydigan xatolar

Callback qaytish turini noto'g'ri belgilash:

// ❌ — filter boolean kutadi, lekin string qaytaryapti
const natija = [1, 2, 3].filter((n) => n > 2 ? "ha" : "");

// ✅
const natija = [1, 2, 3].filter((n) => n > 2);

void funksiya natijasini ishlatish:

type Tinglovchi = (voqea: Event) => void;

function qoshish(fn: Tinglovchi): void {
  const natija = fn(new Event("click"));
  natija.preventDefault(); // ❌ — void, undefined qaytadi
}

Xulosa

// Callback turi
type Fn = (a: number) => string;

// Parametr sifatida
function bajar(fn: (x: number) => void): void { fn(42); }

// Funksiya qaytaruvchi funksiya
function yaratish(n: number): () => number {
  return () => n * 2;
}

// Generic callback
function o_zgartir<T, U>(arr: T[], fn: (x: T) => U): U[] {
  return arr.map(fn);
}

Callback turi — (parametrlar) => qaytishTuri. TypeScript callback ichida ham to'liq tur tekshiradi.

Keyingi dars

26-dars: this parametri — kontekst turi, noImplicitThis