Beberapa pertanyaan TypeScript menimbulkan perdebatan sebanyak antarmuka TypeScript vs tipe. Banyak artikel mencantumkan perbedaan yang dulunya penting di versi lama tetapi sekarang sudah ketinggalan zaman. Jadi, daripada mengulangi klaim, kami mengujinya.

Kami menulis satu file untuk menguji setiap perbedaan, dan memeriksanya dengan TypeScript 5.6.3 dalam mode ketat. Kesalahan kompiler yang dikutip di bawah ini berasal dari proses tersebut. Perilaku dapat berubah antar versi, jadi periksalah versi TypeScript yang digunakan proyek Anda. Jika Anda baru mengenal bahasa ini, mulailah dengan Tutorial TypeScript untuk pemula kami.

Jawaban singkatnya

interface mendeskripsikan bentuk suatu objek, dan dapat diperluas atau dibuka kembali. Alias ​​​​type memberi nama pada tipe apa saja, termasuk objek, gabungan, tupel, dan tipe fungsi. Jika keduanya bisa berfungsi, perbedaannya sebagian besar terletak pada gaya.

Dimana mereka sama

Kedua deklarasi ini mendeskripsikan bentuk yang identik:

interface User {
  id: number;
  name: string;
  email?: string;
}

type UserAlias = {
  id: number;
  name: string;
  email?: string;
};

const a: User = { id: 1, name: "Asha" };
const b: UserAlias = a;   // no error

TypeScript menggunakan pengetikan struktural, yang berarti membandingkan bentuk, bukan nama. Itu sebabnya User dapat ditugaskan ke UserAlias tanpa keluhan. Keduanya mendukung properti opsional, properti readonly, metode, dan tanda tangan indeks.

Antarmuka vs tipe berdampingan

Apa yang hanya bisa dilakukan oleh tipe

Banyak tipe berguna yang bukan merupakan bentuk objek sama sekali, dan hanya alias tipe yang dapat menamainya:

type Status = "pending" | "paid" | "shipped";   // union
type Point = [number, number];                    // tuple
type Handler = (event: string) => void;           // function type
type Keys = keyof User;                           // computed type
type ReadonlyUser = Readonly<User>;               // utility type

Tipe gabungan adalah salah satu fitur TypeScript yang paling berharga, karena kompiler kemudian menolak nilai apa pun di luar daftar:

let s: Status = "paid";
s = "refunded";

// error TS2322: Type '"refunded"' is not assignable to type 'Status'.

Ini menangkap kesalahan ketik dan nilai-nilai usang pada waktu kompilasi, sebelum mencapai produksi.

Penggabungan deklarasi

Jika Anda mendeklarasikan antarmuka dengan nama yang sama dua kali, TypeScript menggabungkannya menjadi satu:

interface Settings {
  theme: string;
}
interface Settings {
  language: string;
}

const settings: Settings = { theme: "dark", language: "en" };   // no error

Coba hal yang sama dengan alias tipe, dan kompiler menolak:

type Config = { theme: string };
type Config = { language: string };

// error TS2300: Duplicate identifier 'Config'.

Penggabungan adalah cara perpustakaan memungkinkan Anda memperluas tipenya. Misalnya, Anda dapat menambahkan properti khusus ke antarmuka global Window, atau ke objek permintaan kerangka kerja, tanpa mengubah pustaka. Itu sungguh berguna.

Sisi sebaliknya adalah penggabungan bisa terjadi secara tidak sengaja. Jika dua file dalam sebuah proyek mendeklarasikan antarmuka dengan nama yang sama dalam cakupan yang sama, keduanya digabungkan secara diam-diam, yang dapat membingungkan. Alias ​​tipe membuat tabrakan itu menjadi kesalahan.

memanjang vs persimpangan

Keduanya memungkinkan Anda membangun tipe yang sudah ada:

interface Admin extends User {
  permissions: string[];
}

type AdminAlias = UserAlias & { permissions: string[] };

Untuk properti yang kompatibel, hasilnya sama. Perbedaannya muncul dengan konflik. Ketika sebuah antarmuka mencoba mengubah tipe properti secara tidak kompatibel, kompilator segera melaporkannya:

interface Base { id: number }
interface Broken extends Base { id: string }

// error TS2430: Interface 'Broken' incorrectly extends interface 'Base'.
//   Types of property 'id' are incompatible.
//     Type 'string' is not assignable to type 'number'.

Sebuah persimpangan tidak mengeluh ketika diumumkan. Sebaliknya, properti yang bertentangan menjadi never, sebuah tipe yang tidak memiliki nilai apa pun. Kesalahan hanya muncul kemudian, ketika Anda mencoba menggunakannya:

type Mixed = { id: number } & { id: string };
const m: Mixed = { id: 1 };

// error TS2322: Type 'number' is not assignable to type 'never'.

Kesalahan berikutnya lebih membingungkan karena menunjukkan kesalahan yang sebenarnya. Ini adalah salah satu alasan praktis untuk memilih extends ketika membangun tipe objek.

Kelas dan implementasinya

Sebuah kelas bisa berjanji untuk mencocokkan bentuk menggunakan implements, dan ini berfungsi dengan antarmuka atau alias tipe objek:

class Account implements User {
  constructor(public id: number, public name: string) {}
}

Ini dikompilasi tanpa kesalahan. Perhatikan bahwa implements hanya memeriksa apakah kelasnya cocok. Itu tidak menambahkan properti atau kode apa pun. Sebuah kelas tidak dapat mengimplementasikan tipe gabungan, karena tidak ada satu bentuk pun yang cocok.

Tipe readonly dan utilitas

Jenis utilitas seperti Readonly, Partial, Pick dan Omit berfungsi dengan antarmuka dan alias. Hasilnya adalah tipe baru, yang biasanya diberi nama dengan alias tipe:

const r: ReadonlyUser = { id: 3, name: "Dev" };
r.name = "Chitra";

// error TS2540: Cannot assign to 'name' because it is a read-only property.

Ingatlah bahwa readonly hanya merupakan pemeriksaan waktu kompilasi. Saat dijalankan, objeknya adalah JavaScript biasa, dan masih dapat diubah dengan kode yang melewati tipe tersebut.

Kinerja kompiler

Panduan kinerja tim TypeScript sendiri menyarankan untuk memilih antarmuka yang menggunakan extends daripada persimpangan besar, karena kompiler dapat menyimpan hubungan antarmuka dalam cache dengan lebih efisien. Dalam proyek kecil dan menengah, Anda tidak akan melihat perbedaan apa pun. Ini mungkin penting dalam basis kode yang sangat besar dengan tipe yang sangat tersusun. Kami tidak mengukurnya sendiri.

Mana yang harus Anda gunakan?

Aturan yang banyak digunakan, sejalan dengan panduan dari buku pegangan TypeScript, adalah:

• Gunakan interface untuk bentuk objek, terutama API publik dan apa pun yang diimplementasikan oleh kelas atau yang lain dapat diperluas.
• Gunakan type untuk gabungan, tupel, tipe fungsi, dan tipe yang dipetakan atau dihitung.

Beberapa tim cukup menggunakan type di mana saja, dan itu juga berfungsi dengan baik. Yang paling penting adalah konsistensi, jadi pilihlah konvensi, tuliskan dalam panduan gaya Anda dan biarkan linter menerapkannya. Aturan ESLint consistent-type-definitions dari TypeScript-eslint dapat melakukan ini.

Kesalahan umum

• Perdebatan tanpa akhir. Keduanya baik-baik saja untuk objek, jadi selesaikan aturannya sekali dan lanjutkan.
• Penggabungan yang tidak disengaja. Menggunakan kembali nama antarmuka dalam cakupan yang sama menggabungkannya secara diam-diam.
• Persimpangan yang bertentangan. Mereka membuat tipe never dengan kesalahan yang membingungkan nantinya.
• Jenis yang dipercaya pada waktu proses. Tipe tersebut akan terhapus, jadi validasi data eksternal.
• Menggunakan any untuk membungkam kesalahan. Ini mematikan pemeriksaan. Pilih unknown dan persempit.

Beralih di antara keduanya dalam basis kode yang sudah ada

Mengubah interface menjadi type, atau sebaliknya, biasanya aman untuk bentuk objek biasa, karena TypeScript membandingkan tipe berdasarkan strukturnya, bukan berdasarkan namanya. Beberapa hal yang masih perlu diperiksa sebelum Anda beralih:

• Mengonversi antarmuka ke alias tipe menghilangkan penggabungan deklarasi, sehingga deklarasi kedua dengan nama yang sama menjadi kesalahan pengidentifikasi duplikat.
• Mengonversi alias tipe menjadi antarmuka hanya berfungsi untuk bentuk objek. Serikat pekerja, tupel, dan tipe yang dipetakan harus tetap sebagai alias tipe.
• Pesan kesalahan dan kursor editor mungkin menampilkan jenis yang berbeda, yang dapat mengejutkan rekan satu tim tetapi tidak mengubah perilaku.

Lakukan perubahan dalam satu permintaan tarik terfokus, jalankan kompiler dalam mode ketat dan rangkaian pengujian Anda, dan hindari mencampurkannya dengan pekerjaan fitur sehingga peninjau dapat melihat bahwa tidak ada perubahan lain.

Penutup

Pertanyaan antarmuka vs tipe memiliki jawaban yang tenang: keduanya tumpang tindih untuk objek, masing-masing memiliki beberapa kemampuan unik, dan konsistensi lebih penting daripada pilihan. Gunakan antarmuka untuk bentuk dan tipe untuk hal lainnya, kecuali tim Anda menginginkan sebaliknya. Untuk melihat sendiri perbedaannya, salin contoh di atas ke dalam file dan jalankan tsc --noEmit --strict di dalamnya.

Pertanyaan yang sering diajukan

Teruslah belajar