Kapan menggunakan Antarmuka dan Model di TypeScript / Angular2

197

Saya baru-baru ini menonton Tutorial tentang Angular 2 dengan TypeScript, tetapi tidak yakin kapan harus menggunakan Interface dan kapan harus menggunakan Model untuk memegang struktur data.

Contoh antarmuka:

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

Contoh Model:

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

Saya ingin memuat data JSON dari URL dan mengikat ke Interface / Model. Kadang saya ingin objek data tunggal, lain kali saya ingin memegang dan array objek.

Yang mana yang harus saya gunakan dan mengapa?

angular typescript I_LIKE_FOO
sumber
13
Gunakan kelas ketika Anda membutuhkan init logika kustom, jika tidak selalu gunakan antarmuka karena ini hanya tersedia pada waktu kompilasi. Antarmuka naskah tidak dikompilasi ke javascript karena tidak ada dalam javascript.
Dieterg
6
Ingatlah bahwa antarmuka TIDAK akan bekerja dengan injeksi dependensi dalam Angular 2. Di sini Anda harus menggunakan kelas.
jlang

Jawaban:

137

Antarmuka hanya pada waktu kompilasi. Ini hanya memungkinkan Anda untuk memeriksa bahwa data yang diharapkan diterima mengikuti struktur tertentu. Untuk ini, Anda dapat mengirimkan konten Anda ke antarmuka ini:

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

Lihat pertanyaan-pertanyaan ini:

Anda dapat melakukan sesuatu yang mirip dengan kelas tetapi perbedaan utama dengan kelas adalah bahwa mereka hadir saat runtime (fungsi konstruktor) dan Anda dapat menentukan metode di dalamnya dengan pemrosesan. Tetapi, dalam hal ini, Anda harus membuat instance objek untuk dapat menggunakannya:

this.http.get('...')
    .map(res => {
      var data = res.json();
      return data.map(d => {
        return new Product(d.productNumber,
          d.productName, d.productDescription);
      });
    });
Thierry Templier
sumber
27
Terima kasih atas jawaban terinci Anda. Jika antarmuka hanya digunakan pada waktu kompilasi, bagaimana kompiler dapat memeriksa struktur file JSON tanpa benar-benar memeriksa http? Jika tidak bisa, lalu apa gunanya repot dengan antarmuka?
I_LIKE_FOO
7
@I_LIKE_FOO kompiler tidak perlu memeriksa panggilan panggilan. Itu hanya peduli memeriksa jenis yang diketahuinya dan bahwa mereka benar. var data = res.json();benar-benar var data: any = res.json();ke kompiler sehingga kita kehilangan semua jenis pemeriksaan data. Apa yang akan lebih berguna di sini akan menjadi sesuatu seperti var data: ProductDto[] = res.json();dengan ProductDtomenjadi antarmuka yang memodelkan struktur data di json yang dikembalikan.
GFoley83
3
Lebih lanjut: Angular style guide says not to use interfaces.Always use classes.Lihat angular.io/guide/styleguide#style-03-03
Sampath
4
Ya, tetapi masalahnya adalah mereka bukan para dewa guru yang merancang naskah. Itu akan menjadi Microsoft dan perusahaan. Mereka cenderung menyukai antarmuka, dan kelas jika perlu. Juga poin bonus ... satu runtime dan lainnya pada waktu kompilasi
Tom Stickel
11
@Sampath Mungkin panduan gaya Sudut telah diperbarui karena saya sekarang melihat ini "Pertimbangkan menggunakan antarmuka untuk model data.". Tersirat lebih suka antarmuka daripada kelas untuk model data.
Mikezx6r
40

The Antarmuka menjelaskan baik kontrak untuk kelas atau baru jenis . Ini adalah elemen murni Script, sehingga tidak mempengaruhi Javascript.

Model, dan yaitu kelas , adalah fungsi JS aktual yang digunakan untuk menghasilkan objek baru.

Saya ingin memuat data JSON dari URL dan mengikat ke Interface / Model.

Gunakan model, jika tidak maka JSON masih ada di Javascript Anda.

pietro909
sumber
4

Seperti yang dikatakan @ThierryTemplier untuk menerima data dari server dan juga mentransmisikan model antar komponen (untuk menjaga daftar intellisense dan membuat kesalahan waktu desain), boleh saja menggunakan antarmuka tapi saya pikir untuk mengirim data ke server (DTO) lebih baik menggunakan kelas untuk mengambil keuntungan pemetaan DTO otomatis dari model.

M_Farahmand
sumber
-22

Gunakan Kelas, bukan Antarmuka itulah yang saya temukan setelah semua penelitian saya.

Mengapa? Kelas saja kurang dari kode kelas-plus-antarmuka. (Pokoknya Anda mungkin memerlukan Kelas untuk model data)

Mengapa? Kelas dapat bertindak sebagai antarmuka (gunakan implement bukan extends).

Mengapa? Kelas antarmuka dapat menjadi token pencarian penyedia dalam injeksi dependensi Angular.

dari Panduan Gaya Sudut

Pada dasarnya Kelas dapat melakukan semua, apa yang akan dilakukan Antarmuka. Jadi mungkin tidak perlu menggunakan Antarmuka .

Sajith Mantharath
sumber
10
Panduan Gaya Sudut saat ini sebenarnya mengatakan, “ Pertimbangkan menggunakan antarmuka untuk model data. ”
Alex Peters
@AlexPeters Berikan tautan otentik apa pun. Terima kasih sebelumnya
Anand Phadke
@AnandPhadke yakin, inilah tautan Wayback Machine ke Panduan Gaya Sudut dari sekitar waktu komentar saya di atas.
Alex Peters