TypeScript/Angular'da Interface ve Model ne zaman kullanılır

Yakın zamanda TypeScript ile Angular 2 üzerine bir eğitim izledim, ancak veri yapıları için ne zaman bir Arayüz (Interface) ne zaman bir Model kullanmam gerektiğinden emin değilim.

Arayüz örneği:

export interface IProduct {
    ProductNumber: number;
    ProductName: string;
    ProductDescription: string;
}

Model Örneği:

export class Product {
    constructor(
        public ProductNumber: number,
        public ProductName: string,
        public ProductDescription: string
    ){}
}

Bir URL'den JSON verisi yüklemek ve bunu Arayüz/Model ile bağlamak istiyorum. Bazen tek bir veri nesnesi, bazen de nesnelerden oluşan bir dizi tutmak istiyorum.

Hangisini kullanmalıyım ve neden?

Cevap #1

Arayüzler yalnızca derleme zamanında vardır. Bu, yalnızca beklenen verinin belirli bir yapıyı izleyip izlemediğini kontrol etmenize olanak tanır. Bunun için içeriğinizi bu arayüze dönüştürebilirsiniz:

this.http.get('...')
    .map(res => <Product[]>res.json());

Bu sorulara bakın:

  • Bir JSON nesnesini TypeScript sınıfına nasıl dönüştürürüm
  • TypeScript'te JSON yanıtından Date nesnesi nasıl alınır

Sınıf ile benzer bir şey yapabilirsiniz ama sınıf ile başlıca farklar şunlardır: sınıflar çalışma zamanında mevcuttur (yapıcı fonksiyon) ve içinde işleme sahip metotları tanımlayabilirsiniz. Ancak, bu durumda onları kullanabilmek için nesneleri örneklemeniz gerekir:

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });

Cevap #2

Arayüz, ya bir sınıf için bir sözleşmeyi ya da yeni bir tipi tanımlar. Bu saf bir Typescript öğesidir, bu nedenle Javascript'i etkilemez.

Bir model, yani bir sınıf, yeni nesneler oluşturmak için kullanılan gerçek bir JS fonksiyonudur.

Bir URL'den JSON verisi yüklemek ve Arayüz/Model ile bağlamak istiyorum.

Bir modele git, aksi takdirde Javascript'inizde hâlâ JSON olacak.

Cevap #3

Ben kişisel olarak modellerim için arayüzler kullanıyorum, ancak bu konuda 3 okul vardır ve birini seçmek çoğunlukla gereksinimlerinize bağlıdır:

1- Arayüzler:

interface, yalnızca TypeScript bağlamında mevcut olan sanal bir yapıdır. TypeScript derleyicisi, arayüzleri yalnızca tür denetimi amaçları için kullanır. Kodu hedef diline dönüştürdüğünüzde, arayüzler kaldırılır - JavaScript türlenmiş değildir.

interface User {
 id: number;
 username: string;
}
// inheritance
interface UserDetails extends User {
 birthdate: Date;
 biography?: string;  // use the '?' annotation to mark this property as optionnal
}

Sunucu yanıtını bir interface ile eşleştirmek, Angular 4.3.x ve üzeri sürümlerinde HttpClientModule üzerinden HttpClient kullanıyorsanız oldukça basittir.

getUsers() :Observable<User[]> {
 return this.http.get<User[]>(url); // no need for '.map((res: Response) => res.json())' 
}

arayüzlerin ne zaman kullanılacağı:

  • Nihai çıktı için ek bir yük getirmeden yalnızca sunucu verileri için tanıma ihtiyacınız var.
  • Sadece verileri iletmeniz gerekir; herhangi bir davranış veya mantık (yapıcı başlatma, yöntemler) gerekli değildir.

  • Arayüzünüzden nesne örneği oluşturmaz/yaratmazsınız çok sık

    • Basit nesne-literal gösterimi kullanarak let instance: FooInterface={ ... };, her yerde yarım örnekler olma riskiyle karşılaşırsınız.
    • Bu, bir sınıf tarafından verilen kısıtlamaları (yapıcı veya başlatma mantığı, doğrulama, özel alanların kapsüllenmesi... vb.) zorlamaz.
  • Sistemleriniz için sözleşmeler/konfigürasyonlar (genel konfigürasyonlar) tanımlamanız gerekir

2- Sınıflar:

Bir class, bir nesnenin taslaklarını tanımlar. Bu nesnelerin miras alacağı mantığı, yöntemleri ve özellikleri ifade ederler.

class User {
 id: number;
 username: string;
 constructor(id :number, username: string)  {
  this.id = id;
  this.username = username.replace(/^\s+|\s+$/g, ''); // trim whitespaces and new lines
 }
}
// inheritance
class UserDetails extends User {
 birthdate: Date;
 biography?: string;  
 constructor(id :number, username: string, birthdate:Date, biography? :string )  {
   super(id,username);
  this.birthdate = ...;
 }
}

sınıflar ne zaman kullanılmalı:

  • Sınıfınızı örnekleyip zaman içinde örneklerin durumunu değiştirirsiniz.
  • Sınıfınızın örneklerinin durumunu sorgulamak veya değiştirmek için yöntemlere ihtiyacı olacak
  • Davranışları verilerle daha yakından ilişkilendirmek istediğinizde;
  • Örneklerinizin oluşturulmasında kısıtlamalar uygularsınız.
  • Sınıfınızda sadece bir sürü özellik ataması yapıyorsanız, bunun yerine bir tür kullanmayı düşünebilirsiniz.

3- Türler:

Typescript'in en son sürümleri ile birlikte, arayüzler ve tipler daha benzer hale geliyor. tipler uygulamanızın içindeki mantığı veya durumu ifade etmez. Bir bilgi biçimini tanımlamak istediğinizde tipleri kullanmak en iyisidir. Basit yapılar olan stringler, diziler ve nesneler gibi verinin çeşitli şekillerini tanımlayabilirler. Arayüzler gibi, tipler yalnızca javascript'e dönüştürülmeyen sanal yapılardır; sadece derleyicinin işimizi kolaylaştırmasına yardımcı olurlar.

type FamilySituation = 'single' | 'married' | 'divorced' | 'widow' ;...
type User = {
 id: number;
 username: string;
}
// inheritance
type UserDetails = User & {
  birthDate: Date;
  familySituation: FamilySituation ;
}

türleri ne zaman kullanmalı:

  • kısa fonksiyon parametreleri olarak paylaş
  • bir sınıf yapıcı parametrelerini tanımla
  • Bir API'den giren veya çıkan küçük veya orta boy nesneleri belgeleyin.
  • onlar durum veya davranış taşımaz

İlgili makaleler