CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Birleştirme

Tüm parçaları birleştirerek çalışan uygulamayı yazarsın.

Özet - Hava durumu uygulaması

Bu projede bir hava durumu uygulamasının tüm parçalarını birleştirdin: veri modeli, API yanıtı tipi, dönüşüm fonksiyonu ve görüntüleme fonksiyonu. Her parça kendi sorumluluğunu taşır ve birlikte çalışan bir uygulama oluşturur. Model veriyi, API tipi dış kaynağı, dönüşüm köprüyü, formatlama çıktıyı temsil eder.

interface Hava { sehir: string; sicaklik: number; }
function donustur(y: ApiYanit): Hava { ... }
function formatla(h: Hava): string { ... }

Final montaj

Son montajda tüm parçalar tek bir akışta birleşir: ApiYanit tipinde ham veri alınır, donustur ile Hava modeline çevrilir, sonra formatla ile kullanıcıya gösterilecek metin üretilir. Bu akış, dış ve iç veriyi ayrı tutar ve bakımı kolaylaştırır.

Uygulama Çalışan hava durumu uygulaması

ApiYanit ve Hava interface'leri tanımla: ikisi de sehir: string ve sicaklik: number içersin. donustur fonksiyonu (y: ApiYanit): Hava olsun ve { sehir: y.sehir, sicaklik: y.sicaklik } dönsün. formatla fonksiyonu (h: Hava): string olsun ve h.sehir + " " + h.sicaklik + "C" dönsün. yanit adında bir ApiYanit nesnesi oluştur: { sehir: "Antalya", sicaklik: 30 }. donustur(yanit) ile hava değişkenine ata ve formatla(hava) sonucunu console.log ile yazdır.

Başlangıç kodu

index.ts
// ApiYanit ve Hava interface tanımla
// donustur ve formatla fonksiyonları yaz
// yanit nesnesi oluştur
// donustur ile hava'ya çevir, formatla ile yazdır

Örnek çözüm

index.ts
interface ApiYanit { sehir: string; sicaklik: number; }
interface Hava { sehir: string; sicaklik: number; }
function donustur(y: ApiYanit): Hava {
  return { sehir: y.sehir, sicaklik: y.sicaklik };
}
function formatla(h: Hava): string {
  return h.sehir + " " + h.sicaklik + "C";
}
const yanit: ApiYanit = { sehir: "Antalya", sicaklik: 30 };
const hava = donustur(yanit);
console.log(formatla(hava));

Beklenen çıktı

Antalya 30C

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Birleştirme sırasında doğru akış aşağıdakilerden hangisidir?

  • Önce interface tanımla, sonra hiçbir şey
  • Önce formatla, sonra API çağrısı
  • Önce formatla, sonra donustur
  • API verisi al, donustur, formatla Doğru cevap

Açıklama: Doğru akış: API verisi alınır, donustur ile iç modele çevrilir, sonra formatla ile kullanıcıya gösterilir.

2 Dönüşüm fonksiyonu çağrısı

Soru 
const hava = ____(yanit);
Cevap 
const hava = donustur(yanit);

Açıklama: Ham API verisini iç modele çevirmek için donustur fonksiyonu çağrılır; formatla yalnızca görüntüleme içindir.

3 Birleştirme parçaları

Kavram Anlamı
ApiYanit API veri türü
donustur Dönüşüm adımı
formatla Görüntüleme adımı
yanit Ham API verisi

Orta seviye bölümündeki tüm dersler

1 Sınıflar

  1. Class temelleri
  2. Constructor ve alanlar
  3. Metotlar
  4. Statik üyeler
  5. Özet - Sınıflar

2 Erişim belirteçleri

  1. public
  2. private
  3. protected
  4. Parametre özellikleri
  5. Özet - Erişim belirteçleri

3 Readonly özellikler

  1. readonly alanlar
  2. Readonly parametre
  3. Readonly vs const
  4. Özet - Readonly

4 Generic'ler

  1. Generic nedir?
  2. Generic fonksiyonlar
  3. Generic sınıflar
  4. Çoklu tür parametresi
  5. Özet - Generic'ler

5 Generic kısıtları

  1. extends kısıtı
  2. keyof kısıtı
  3. Default tür parametresi
  4. Özet - Generic kısıtları

6 Utility types

  1. Partial
  2. Required ve Pick
  3. Omit ve Record
  4. Özet - Utility types

7 keyof ve typeof

  1. keyof operatörü
  2. typeof operatörü
  3. keyof ile indexing
  4. Özet - keyof ve typeof

8 Mapped types

  1. Mapped type nedir?
  2. Readonly mapped type
  3. Optional mapped type
  4. Özet - Mapped types

9 Conditional types

  1. Conditional type nedir?
  2. Distributive conditional
  3. Conditional ile mantık
  4. Özet - Conditional types

10 infer

  1. infer anahtar kelimesi
  2. Promise'ten değer çıkarma
  3. Dizi eleman türü
  4. Özet - infer

11 Decorator'lar

  1. Decorator nedir?
  2. Method decorator
  3. Property decorator
  4. Decorator fabrikaları
  5. Özet - Decorator'lar

12 Modüller

  1. export ve import
  2. Default export
  3. Re-export
  4. Type-only import
  5. Özet - Modüller

13 Namespace'ler

  1. Namespace nedir?
  2. İç içe namespace
  3. Namespace vs module
  4. Özet - Namespace'ler

14 Declaration dosyaları

  1. .d.ts nedir?
  2. Ambient module
  3. Triple-slash directive
  4. Özet - Declaration dosyaları

15 İleri sınıflar

  1. abstract sınıf
  2. implements
  3. Get ve set
  4. Özet - İleri sınıflar

16 Type assertion

  1. as anahtar kelimesi
  2. angle bracket syntax
  3. Type assertion vs casting
  4. unknown'dan cast
  5. Özet - Type assertion

17 Proje: Kütüphane paketi

  1. Paket tasarımı
  2. Türleri dışa aktarma
  3. Generic yardımcılar
  4. Bildirim dosyası
  5. Birleştirme

18 Proje: Quiz uygulaması

  1. Soru modeli
  2. Soru havuzu
  3. Cevap kontrolü
  4. Skor hesaplama
  5. Birleştirme

19 Proje: Hava durumu

  1. Hava durumu modeli
  2. API yanıtı tipi
  3. Veri dönüştürme
  4. Görüntüleme
  5. Birleştirme

20 Orta seviye finali

  1. Meydan okuma 1: Sınıflar
  2. Meydan okuma 2: Generic'ler
  3. Meydan okuma 3: Tür sistemleri
  4. Meydan okuma 4: Mini uygulama