Rumah > hujung hadapan web > tutorial js > Antara Muka lwn Taip dalam TypeScript

Antara Muka lwn Taip dalam TypeScript

Linda Hamilton
Lepaskan: 2024-11-17 06:26:03
asal
670 orang telah melayarinya

Interface vs Type in TypeScript

TypeScript ialah bahasa teguh yang menambahkan penaipan statik pada JavaScript, membawa tahap kebolehpercayaan dan kebolehselenggaraan yang baharu kepada kod. Dengan mendayakan definisi jenis, TypeScript meningkatkan pengalaman pembangunan, menjadikan kod lebih mudah untuk nyahpepijat dan dibaca. Di antara banyak cirinya, TypeScript menyediakan binaan antara muka dan jenis untuk menentukan bentuk data—sama ada pembolehubah, objek atau kelas. Walaupun mereka berkongsi persamaan, masing-masing mempunyai kekuatan yang unik dan mengetahui masa untuk menggunakan satu daripada yang lain boleh menjadikan kod anda lebih bersih dan lebih cekap.

Antara muka

Diperkenalkan dalam versi terawal TypeScript, antara muka telah diilhamkan oleh konsep pengaturcaraan berorientasikan objek (OOP). Ia membolehkan anda mentakrifkan bentuk objek dengan cara yang mudah dan menyediakan binaan kelas pertama untuk mencipta jenis objek boleh guna semula dan boleh dipanjangkan.

Contoh Antara Muka Asas

interface Car {
    brand: string;
    color: string;
}
Salin selepas log masuk
Salin selepas log masuk

Warisan Antara Muka

Salah satu kekuatan utama antara muka ialah warisan. Antara muka boleh memanjangkan antara muka lain, menjadikannya mudah untuk membina struktur sedia ada.

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };
Salin selepas log masuk

Antara muka untuk Kelas

Antara muka juga merupakan pilihan yang bagus untuk mentakrifkan struktur atau "kontrak" kelas, menyatakan kaedah dan sifat yang sepatutnya dimiliki oleh kelas.

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}
Salin selepas log masuk

Pengisytiharan Antara Muka Penggabungan

Antara muka boleh digabungkan—apabila berbilang antara muka dengan nama yang sama diisytiharkan dalam skop yang sama, ia bergabung menjadi satu. Ini boleh membantu, tetapi penggunaan berlebihan boleh membawa kepada kerumitan.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };
Salin selepas log masuk

Nota: Gunakan pengisytiharan penggabungan dengan berhati-hati. Penggabungan yang berlebihan boleh menyebabkan antara muka sukar difahami dan nyahpepijat disebabkan oleh kesan sampingan yang tidak diingini.

taip

Sebagai alternatif kepada antara muka, TypeScript juga menyediakan kata kunci jenis, yang lebih fleksibel dan boleh mewakili pelbagai jenis, bukan hanya objek. Dengan jenis, anda boleh menentukan kesatuan, persimpangan dan juga jenis primitif alias.

Jenis Kesatuan dengan Jenis

Sebagai contoh, jenis membenarkan jenis kesatuan, iaitu sesuatu yang tidak dapat dikendalikan oleh antara muka.

type Id = string | number;
Salin selepas log masuk

Jenis Sekatan Pengisytiharan

Tidak seperti antara muka, jenis tidak menyokong penggabungan pengisytiharan. Percubaan untuk mengisytiharkan semula jenis akan menyebabkan ralat.

type User = {
    name: string;
};

// Error: Duplicate identifier 'User'
type User = {
    age: number;
}
Salin selepas log masuk

Jenis Komposisi

jenis juga sesuai untuk mengarang jenis baharu daripada yang sedia ada, menjadikannya alat yang berkuasa untuk mentakrifkan struktur data yang kompleks.

interface Car {
    brand: string;
    color: string;
}
Salin selepas log masuk
Salin selepas log masuk

Bilakah Anda Harus Menggunakan Setiap?

  • Gunakan antara muka apabila mentakrifkan struktur objek dan kelas, kerana ia menawarkan fleksibiliti yang lebih baik dengan warisan dan berfungsi dengan lancar dengan penyemakan jenis TypeScript.
  • Gunakan jenis untuk kesatuan, persimpangan, alias jenis primitif atau apabila anda perlu mencipta jenis yang kompleks dan boleh digunakan semula.

Kesimpulan

Kedua-dua antara muka dan jenis membawa keupayaan berharga kepada TypeScript. Dengan memahami kekuatan setiap satu, anda boleh memilih alat yang sesuai untuk setiap situasi, menjadikan kod anda lebih bersih, lebih mudah difahami dan lebih mudah diselenggara. Hayati kehebatan sistem penaipan TypeScript dan nikmati kejelasan dan keselamatan yang dibawanya kepada projek anda!

Atas ialah kandungan terperinci Antara Muka lwn Taip dalam TypeScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan