Ketik vs. Antarmuka di TypeScript

Type vs. Interface adalah salah satu hal yang paling membingungkan dan menarik di TypeScript. Kami akan mencoba menjernihkan kebingungan itu.

TypeScript dibuat di atas JavaScript, yang menambahkan tipe statis . Memiliki tipe adalah hal yang luar biasa bagi pengembang. Jenis menulis akan sulit, tetapi Anda tidak akan menyesal dalam jangka panjang.

TypeScript memiliki semua tipe dasar seperti angka, string, boolean, dll. Seiring dengan tipe dasar, TypeScript memungkinkan kita untuk membuat tipe kustom dan menentukan bagaimana suatu objek terlihat dengan bantuan Alias ​​​​Tipe dan Antarmuka, masing-masing.

Tipe Alias ​​​​tidak lain adalah Tipe. Membuat tipe dengan nama khusus (alias) menjadikannya Tipe Alias, tidak lebih dari itu.

Mari kita lihat sintaks dasar Interfaces dan Type Aliases .

Sintaks Dasar

Antarmuka

Antarmuka akan dideklarasikan dengan kata kunci interface . Periksa sintaks antarmuka di bawah ini.

 interface InterfaceName { keyName: typeOfKey ... }

Perhatikan contoh contoh di bawah ini.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Ketik Alias

Jenis alias akan dideklarasikan menggunakan kata kunci type . Periksa sintaks tipe alias di bawah ini.

 type TypeName = { keyName: typeOfKey; ... }

Perhatikan contoh contoh di bawah ini.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Kami telah membuat jenis untuk Site menggunakan antarmuka dan jenis alias . Keduanya valid dan dapat digunakan untuk tipe objek yang disebutkan dalam contoh. Hanya sintaks yang berbeda dalam contoh di atas, yang jelas.

Mari kita terus mengeksplorasi perbedaan di antara mereka untuk menemukan lebih banyak hal.

Tuple

Tuple dalam TypeScript adalah larik panjang yang telah ditentukan sebelumnya. Ini mendefinisikan jenis setiap indeks.

Kita dapat mendeklarasikan tupel menggunakan alias tipe. Tapi kita tidak bisa melakukannya menggunakan antarmuka. Mari kita lihat bagaimana melakukannya dengan alias tipe.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

Dalam contoh di atas, kita telah mendefinisikan tipe untuk setiap elemen indeks untuk array. Jika kita memberikan beberapa tipe lain dalam array, TypeScript akan menimbulkan kesalahan.

Tidak bisakah kita melakukannya dengan antarmuka?

Kami tidak dapat melakukannya persis seperti yang kami lakukan dengan alias tipe. Antarmuka digunakan untuk tipe objek. Jadi, kita perlu memiliki tupel di dalam objek untuk menggunakannya di antarmuka. Mari kita lihat contohnya.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Jika Anda melihat kodenya, kami memiliki tupel yang disebut detail di dalam Antarmuka. Jadi, kita bisa menggunakan tupel di dalam antarmuka.

Demikian pula, kita dapat menggunakan alias tipe untuk tipe tunggal seperti string, angka, boolean, dll. Karena Antarmuka digunakan untuk tipe objek, kita dapat menggunakannya untuk tipe tunggal seperti alias tipe.

Hal menarik lainnya adalah kita bisa menggunakan tipe alias tuple di interfacenya . Periksa contoh di bawah ini.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Mari kita lanjutkan ke hal berikutnya.

Penggabungan Deklarasi – Antarmuka

Penggabungan deklarasi menggunakan TypeScript untuk menggabungkan jenis antarmuka dengan nama yang sama. Mari kita lihat contoh untuk mendapatkan kejelasan lebih lanjut.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Jika Anda melihat kode di atas, kami telah mendeklarasikan Antarmuka dengan nama yang sama sebanyak 3 kali. Kompiler TypeScript akan mengkompilasi semua 3 formulir itu menjadi satu tipe objek yang mencakup semua tipe dari antarmuka yang memiliki nama yang sama.

Anda dapat mengonfirmasi penggabungan deklarasi dengan menghapus satu kunci dari objek geekflare . Jika Anda menghapus salah satu kunci dari geekflare , Anda akan melihat kesalahan.

Kami tidak dapat melakukan hal yang sama dengan alias tipe. Kebanyakan orang tidak menggunakan fitur itu. Secara umum, memiliki banyak antarmuka dengan nama yang sama membingungkan.

Ketik alias penggemar, jangan khawatir tentang fitur antarmuka ini.

Memperpanjang

Katakanlah Anda telah mendeklarasikan sebuah tipe. Sekarang, Anda ingin mendeklarasikan tipe lain bersama dengan tipe tipe sebelumnya. Dalam hal ini, kita dapat memperluas tipe sebelumnya. Kita bisa melakukannya dengan antarmuka dan alias tipe .

Mari kita lihat mereka berdua.

Antarmuka

Ada kata kunci yang disebut extends untuk kasus penggunaan ini di TypeScript. Kami akan menggunakannya untuk memperluas antarmuka. Mari kita periksa contohnya.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Kami telah membuat Antarmuka Geekflare dengan memperluas Antarmuka Site . Semua jenis Site akan hadir di Antarmuka Geeflare bersama dengan jenisnya sendiri. Anda dapat menghapus kunci name dari variabel geekflare untuk mengonfirmasinya.

Kami dapat memperluas beberapa antarmuka sebagai berikut.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Cobalah memperluas dengan lebih dari 2 antarmuka untuk bersenang-senang. Kami juga dapat memperluas alias tipe dengan Antarmuka.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Kami telah memperluas hanya satu jenis dalam contoh di atas. Anda dapat memperluas sebanyak yang Anda inginkan, mirip dengan contoh sebelumnya untuk memperluas beberapa antarmuka.

Mari kita lihat bagaimana melakukannya dengan alias tipe.

Ketik Alias

Kita dapat memperluas alias tipe menggunakan tipe persimpangan di TypeScript. Mari kita lihat contohnya.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Kami telah memperluas jenis Site dengan founder untuk jenis Geekflare menggunakan persimpangan (&) . Anda dapat mengujinya dengan menghapus salah satu kunci dari variabel geekflare , yang akan menimbulkan kesalahan.

Mirip dengan antarmuka, kami dapat memperluas beberapa jenis sebagai berikut.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Kami juga dapat memperluas antarmuka dengan alias tipe sama dengan antarmuka yang memperluas alias tipe. Periksa contoh di bawah ini.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Coba perluas kombinasi alias tipe dan antarmuka.

Menerapkan

Ini bukan perbedaan antara antarmuka dan alias tipe. Hanya fitur class yang perlu diketahui.

Sebuah class dapat mengimplementasikan interface dan type alias dengan cara yang sama. Mari kita lihat contoh untuk keduanya.

Antarmuka

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Ketik Alias

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Catatan: satu hal yang perlu diingat adalah kita tidak bisa mengimplementasikan tipe gabungan (|) atau persimpangan (&) dengan kelas.

Kata-kata Terakhir

Seperti yang Anda lihat di artikel, kami dapat melakukan semuanya dengan alias tipe dan antarmuka. Jadi, kita tidak bisa secara tegas mengatakan bahwa yang satu lebih baik dari yang lain. Pada akhirnya, itu adalah pilihan pribadi seseorang untuk memilih salah satunya. Anda akan mengembangkan gaya Anda menggunakannya pada akhirnya.

Selanjutnya, Anda dapat memeriksa TypeScript vs. Javascript.

Selamat Coding