CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Özet - Interface'ler

Interface'lerle bir ürün kataloğu modeli yazarsın.

Özet - Interface'ler

Interface'ler nesne şekillerini sözleşme olarak tanımlar, özelliklere tür verir (isteğe bağlı ve readonly dahil) ve nesneler için özel bir tanımlama aracıdır. type ile karşılaştırıldığında interface nesnelere özeldir ve genişletilebilir.

interface Urun {
  readonly id: number;
  ad: string;
  fiyat?: number;
}

Bu özellikler birlikte güçlü ve esnek veri modelleri oluşturur.

Uygulama Ürün kataloğu modeli

Urun adında bir interface tanımla; readonly id: number, ad: string ve fiyat?: number özellikleri içersin. urun adında bir değişkeni Urun türünde tanımla ve değerini { id: 1, ad: "defter", fiyat: 20 } yap. urun.ad değerini console.log ile yazdır.

Başlangıç kodu

index.ts
// Urun adında bir interface tanımla
// readonly id (number), ad (string), fiyat? (number) özellikleri içersin
// urun değişkenini Urun türünde tanımla
// değer: id 1, ad "defter", fiyat 20
// urun.ad değerini yazdır

Örnek çözüm

index.ts
interface Urun {
    readonly id: number;
    ad: string;
    fiyat?: number;
}
let urun: Urun = { id: 1, ad: "defter", fiyat: 20 };
console.log(urun.ad);

Beklenen çıktı

defter

Soru ve cevaplar

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

1 <code>interface</code>, <code>type</code>'a ne zaman tercih edilmelidir?

  • İlkel tür takma adı tanımlarken
  • Genişletilebilecek nesne şekli tanımlarken Doğru cevap
  • Kesişim türü tanımlarken
  • Birleşik tür tanımlarken

Açıklama: <code>interface</code>, genişletilebilecek (<code>extends</code>) nesne şekilleri için tercih edilir; birleşik ve kesişim türleri yalnızca <code>type</code> ile tanımlanabilir.

2 İsteğe bağlı özellik türünü tamamla

Soru 
interface Urun {
  readonly id: number;
  ad: string;
  fiyat?: ____;
}
Cevap 
interface Urun {
  readonly id: number;
  ad: string;
  fiyat?: number;
}

Açıklama: Ürün fiyatı bir sayıdır; <code>fiyat?: number</code> doğru tamamdır. <code>string</code> ve <code>boolean</code> fiyat için yanlış tür, <code>void</code> ise özellik türü değildir.

3 Interface özeti

Kavram Anlamı
interface X { ... } Nesne şekli sözleşmesi
ad?: string Atlanabilir özellik
readonly id: number İlk atamadan sonra sabit
interface vs type Interface genişletilebilir

Başlangıç bölümündeki tüm dersler

1 TypeScript nedir? Kurulum

  1. TypeScript nedir?
  2. Neden TypeScript?
  3. tsc derleyicisi
  4. tsconfig temelleri
  5. Özet - TypeScript temelleri

2 Temel türler

  1. string türü
  2. number türü
  3. boolean türü
  4. let ve const
  5. Özet - Temel türler

3 Diziler

  1. Array türü
  2. Array metotları
  3. readonly diziler
  4. Çok boyutlu diziler
  5. Özet - Diziler

4 Tuple

  1. Tuple nedir?
  2. Tuple kullanımı
  3. readonly tuple
  4. Özet - Tuple

5 Enum

  1. Numeric enum
  2. String enum
  3. const enum
  4. Enum üyeleri
  5. Özet - Enum

6 any, unknown, never

  1. any türü
  2. unknown türü
  3. never türü
  4. void türü
  5. Özet - Özel türler

7 Type annotation

  1. Değişken annotation
  2. Parametre annotation
  3. Return type annotation
  4. Özet - Type annotation

8 Type inference

  1. Temel inference
  2. const ile inference
  3. Best common type
  4. Özet - Type inference

9 Objeler

  1. Object türü
  2. Optional properties
  3. Readonly properties
  4. Özet - Objeler

10 Fonksiyonlar

  1. Function declaration
  2. Optional ve default params
  3. Rest params
  4. Function overloads
  5. Özet - Fonksiyonlar

11 Arrow fonksiyonlar

  1. Arrow syntax
  2. Arrow ile this
  3. Arrow type
  4. Özet - Arrow fonksiyonlar

12 Interface'ler

  1. Interface nedir?
  2. Property types
  3. Interface vs type alias
  4. Özet - Interface'ler

13 Type alias

  1. Type alias nedir?
  2. Alias ile composition
  3. Alias vs interface
  4. Özet - Type alias

14 Union ve intersection

  1. Union types
  2. Intersection types
  3. Literal types
  4. Özet - Union & intersection

15 null ve undefined

  1. null ve undefined farkı
  2. Optional chaining
  3. Nullish coalescing
  4. Özet - null & undefined

16 Strict mode

  1. strict: true
  2. strictNullChecks
  3. strictFunctionTypes
  4. Özet - Strict mode

17 Proje: Alışveriş sepeti

  1. Sepet tasarımı
  2. Ürün ekleme
  3. Toplam hesaplama
  4. İndirim uygulama
  5. Birleştirme

18 Proje: Todo CLI

  1. Görev modeli
  2. Ekleme ve listeleme
  3. Tamamlama
  4. Filtreleme
  5. Birleştirme

19 Proje: Kütüphane

  1. Kitap modeli
  2. Ekleme ve arama
  3. Ödünç alma
  4. İade etme
  5. Birleştirme

20 Başlangıç finali

  1. Meydan okuma 1: Türler
  2. Meydan okuma 2: Fonksiyonlar
  3. Meydan okuma 3: Birleşim
  4. Meydan okuma 4: Mini uygulama