Meydan okuma 4: Mini uygulama
- TypeScript kursu
- Orta seviye
- Ders 89/89
- 6 dk
Orta seviyenin tamamını yoklayan bir görev çözersin.
Mini uygulama meydan okuması
Bu meydan okuma orta seviyenin tamamını yoklar. interface ile veri modeli, generic fonksiyonlar, erişim belirteçleri ve görüntüleme fonksiyonlarını birleştirerek çalışan bir mini uygulama yazacaksın. Her parça kendi sorumluluğunu taşır ve birlikte tür güvenli, çalışır bir uygulama oluşturur.
Uygulama Generic ilk eleman yardımcısı
Urun interface'i tanımla: ad: string, fiyat: number. ilk generic fonksiyonu <T>(arr: T[]): T | undefined olsun ve return arr[0] dönsün. urunler dizisi iki Urun içersin: { ad: "kalem", fiyat: 5 } ve { ad: "defter", fiyat: 10 }. ilk(urunler) sonucunu ilkUrun'e ata ve ilkUrun.ad'ı yazdır.
Başlangıç kodu
// Urun interface tanimla
// ilk generic fonksiyonu yaz
// urunler dizisi olustur
// ilk ile ilk urunu al
// ad yazdirÖrnek çözüm
interface Urun { ad: string; fiyat: number; }
function ilk<T>(arr: T[]): T | undefined {
return arr[0];
}
const urunler: Urun[] = [
{ ad: "kalem", fiyat: 5 },
{ ad: "defter", fiyat: 10 }
];
const ilkUrun = ilk(urunler);
console.log(ilkUrun.ad);Beklenen çıktı
kalem
Uygulama Görev filtreleme uygulaması
Gorev interface'i tanımla: ad: string, tamamlandi: boolean. filtrele generic fonksiyonu <T>(arr: T[], kosul: (x: T) => boolean): T[] olsun. İçinde sonuc: T[] boş dizi tanımla, for...of ile her eleman için kosul(x) true ise sonuc.push(x) yap, return sonuc. gorevler dizisi iki Gorev içersin: { ad: "a", tamamlandi: true } ve { ad: "b", tamamlandi: false }. filtrele(gorevler, (g) => !g.tamamlandi) sonucunu aciklar'a ata ve aciklar.length'i yazdır.
Başlangıç kodu
// Gorev interface tanimla
// filtrele generic fonksiyonu yaz
// gorevler dizisi olustur
// tamamlanmamislari filtrele
// aciklar.length yazdirÖrnek çözüm
interface Gorev { ad: string; tamamlandi: boolean; }
function filtrele<T>(arr: T[], kosul: (x: T) => boolean): T[] {
const sonuc: T[] = [];
for (const x of arr) {
if (kosul(x)) sonuc.push(x);
}
return sonuc;
}
const gorevler: Gorev[] = [
{ ad: "a", tamamlandi: true },
{ ad: "b", tamamlandi: false }
];
const aciklar = filtrele(gorevler, (g) => !g.tamamlandi);
console.log(aciklar.length);Beklenen çıktı
1
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir mini uygulamada veri modeli, generic fonksiyon ve görüntüleme adımlarının doğru sırası nedir?
- Sadece generic yaz, gerisi gerekmez
- Model tanımla, generic fonksiyon yaz, görüntüle Doğru cevap
- Sadece görüntüle, model gerekmez
- Önce görüntüle, sonra model, sonra generic
Açıklama: Doğru akış: önce veri modeli tanımlanır, sonra generic fonksiyon yazılır, en son görüntüleme yapılır.
2 Veri modeli anahtar kelimesi
____ Gorev { ad: string; tamamlandi: boolean; }interface Gorev { ad: string; tamamlandi: boolean; }Açıklama: Bir nesne yapısını tanımlamak için interface kullanılır; type alternatiftir ama farklı sözdizimi gerektirir.
3 Mini uygulama parçaları
| Kavram | Anlamı |
|---|---|
interface |
Veri modeli |
generic |
Tür güvenli yardımcı |
extends |
Kısıt |
console.log |
Çıktı |