TypeScript əsasları

Tip məlumatın müqaviləsidir

TypeScript JavaScript-in üzərinə statik tip yoxlaması əlavə edir. Tiplər brauzerdə işləyən koddan çıxarılır; onlar serverdən gələn məlumatı işləmə zamanı avtomatik yoxlamır.

type Product = { name: string; price: number };
function affordable(items: Product[], budget: number): Product[] {
  return items.filter(item => item.price <= budget);
}

Nümunə

Bir dəyişən bir neçə tip ala bilərsə union istifadə et, məsələn string | null. Dəyərdən istifadə etməzdən əvvəl uyğun yoxlama apar. Bu mövzu əlavə dərinləşmədir: JavaScript təməlin möhkəmdirsə, React-a keçib sonra qayıda bilərsən.

Əlavə qeydlər və mənbələr

JavaScript kodunda məlumat tiplərini açıq göstər.

Niyə vacibdir?

Tip yoxlaması bəzi səhvləri proqramı işlətməzdən əvvəl tapır və kodun niyyətini aydınlaşdırır.

Əvvəlki biliklər

npm və layihə alətləri

Bu mövzuda

Əsas tiplər və tip çıxarışı
Obyekt tipi, interface və union
Funksiya parametrləri və qaytarılan tip
unknown ilə təhlükəsiz yoxlama

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Məlumat tipini müqayisə et

Eyni girişin number və string nəticələrini gör.

DəyərTip

Hədəf: Dəyəri number tipinə çevir.

Canlı nəticə

Giriş"42"

Nəticə"42"

Mənbə kodu

String("42")

Özün sına

Məhsul filtrini TypeScript-ə köçür. Product tipi yarat və yanlış qiymət tipi verdikdə yaranan xətanı izah et.

Nəticəni necə yoxlayım?

Kod any istifadə etmədən tip yoxlamasından keçir; API məlumatının ayrıca yoxlanmalı olduğunu anlayırsan.

Gözlənilən nəticə

15 AZN büdcə Kitab obyektini qaytarır.
@ts-expect-error götürüldükdə price üçün string→number tip xətası yaranır.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Product tipi müqaviləni müəyyən edir. Yanlış qiymət tipi @ts-expect-error ilə qəsdən göstərilib; işarəni götürəndə TypeScript xəta bildirməlidir.

filter.ts

type Product = { id: number; title: string; price: number };
function affordable(products: Product[], budget: number): Product[] {
  if (!Number.isFinite(budget) || budget < 0) return [];
  return products.filter(product => product.price <= budget);
}
const products: Product[] = [{ id: 1, title: 'Kitab', price: 12 }];
console.log(JSON.stringify(affordable(products, 15)));
// @ts-expect-error: price string deyil, number olmalıdır.
const invalid: Product = { id: 2, title: 'Çanta', price: '25' };

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.