Jenis Persilangan dalam TypeScript
Artikel ini menerangkan jenis persilangan dalam TypeScript.
YouTube Video
Jenis Persilangan dalam TypeScript
Dalam TypeScript, jenis persilangan merupakan cara untuk menggabungkan pelbagai jenis untuk mencipta jenis baharu.
Apa itu Jenis Persilangan?
Jenis persilangan membolehkan anda menggabungkan pelbagai jenis untuk menentukan jenis baharu dengan semua sifat daripada jenis tersebut. Jenis persilangan ditakrifkan menggunakan simbol & dan memerlukan semua sifat daripada setiap jenis komponen.
Contoh:
1type A = { name: string };
2type B = { age: number };
3
4type C = A & B;
5
6const person: C = {
7 name: "John Doe",
8 age: 30
9};Dalam kod ini, dengan mentakrifkan type C = A & B, jenis C menjadi jenis objek dengan sifat name (jenis string) dan age (jenis nombor).
Manfaat Jenis Persilangan
Dengan menggunakan jenis persilangan, anda boleh menggunakan semula jenis sedia ada dan mentakrifkan jenis yang lebih fleksibel serta gabungan. Ini meningkatkan kebolehselenggaraan dan kebolehluasan kod anda. Selain itu, jenis persilangan boleh mengenakan kekangan daripada pelbagai jenis berbeza secara serentak, sekali gus meningkatkan keselamatan jenis.
Manfaat:
- Kebolehgunaan Semula: Dengan menggabungkan pelbagai jenis, anda boleh mengurangkan definisi berulang dan menggunakan semula jenis sedia ada.
- Keselamatan Jenis: Jenis persilangan meningkatkan pemeriksaan jenis dengan hanya membenarkan objek yang memenuhi syarat daripada pelbagai jenis.
Kegunaan Jenis Persilangan
Jenis persilangan sangat berguna apabila melanjutkan objek atau antara muka. Secara khusus, ia berguna apabila anda ingin mewakili objek dengan pelbagai sifat.
Kegunaan 1: Objek dengan Pelbagai Antara Muka
1interface Drivable {
2 drive(): void;
3}
4
5interface Flyable {
6 fly(): void;
7}
8
9type Vehicle = Drivable & Flyable;
10
11const car: Vehicle = {
12 drive() {
13 console.log("Driving on the road");
14 },
15 fly() {
16 console.log("Flying in the sky");
17 }
18};
19
20car.drive(); // "Driving on the road"
21car.fly(); // "Flying in the sky"
Dalam contoh ini, jenis Vehicle ditakrifkan sebagai jenis persilangan yang menggabungkan Drivable dan Flyable. Objek jenis Vehicle mesti melaksanakan kedua-dua kaedah drive() dan fly().
Kegunaan 2: Menggabungkan Kelas dan Jenis Persilangan
Dengan menggabungkan kelas dan jenis persilangan, adalah mungkin untuk mencipta objek yang mempunyai sifat pelbagai antara muka.
1interface Person {
2 name: string;
3}
4
5interface Employee {
6 employeeId: number;
7}
8
9type PersonEmployee = Person & Employee;
10
11class CompanyWorker implements PersonEmployee {
12 constructor(public name: string, public employeeId: number) {}
13
14 getDetails() {
15 return `${this.name}, Employee ID: ${this.employeeId}`;
16 }
17}
18
19const worker = new CompanyWorker("Alice", 123);
20console.log(worker.getDetails()); // "Alice, Employee ID: 123"
Di sini, kami menggunakan jenis persilangan PersonEmployee daripada Person dan Employee untuk menjadikan kelas CompanyWorker mempunyai sifat kedua-duanya.
Perkara yang Perlu Dipertimbangkan dengan Jenis Persilangan
Satu perkara penting apabila menggunakan jenis persilangan ialah menyedari kemungkinan konflik sifat. Jika sifat dengan nama yang sama mempunyai anotasi jenis yang berbeza di antara jenis yang berlainan, ralat mungkin berlaku.
Contoh Berhati-hati:
1type A = { id: number };
2type B = { id: string };
3
4type C = A & B;
5
6// Error: Type 'number' and 'string' are not compatible
7const obj: C = {
8 id: 1
9};Dalam contoh ini, sifat id dari A dan B bercanggah, menyebabkan ralat ketika mendefinisikan objek dengan jenis C. Dalam kes sebegini, semakan reka bentuk diperlukan untuk mengelakkan konflik sifat.
Contoh Kod dengan Anotasi Jenis untuk Jenis Persilangan
Akhirnya, berikut adalah contoh kod sebenar yang merangkumi anotasi jenis.
Contoh 1: Memaparkan Butiran Objek
1type ContactInfo = { phone: string; email: string };
2type Address = { city: string; postalCode: string };
3
4type PersonDetails = ContactInfo & Address;
5
6const details: PersonDetails = {
7 phone: "123-4567",
8 email: "example@mail.com",
9 city: "New York",
10 postalCode: "10001"
11};
12
13console.log(details);Contoh 2: Objek dengan Sifat Tambahan
1interface BasicInfo {
2 name: string;
3 age: number;
4}
5
6interface WorkInfo {
7 company: string;
8 position: string;
9}
10
11type FullInfo = BasicInfo & WorkInfo;
12
13const employee: FullInfo = {
14 name: "Bob",
15 age: 28,
16 company: "Tech Corp",
17 position: "Engineer"
18};
19
20console.log(`${employee.name} is a ${employee.position} at ${employee.company}`);Kesimpulan
Jenis persilangan dalam TypeScript adalah ciri yang kuat untuk menggabungkan pelbagai jenis menjadi jenis baru. Ini meningkatkan kebolehgunaan semula dan keselamatan kod, memungkinkan definisi jenis yang kompleks. Dengan memanfaatkan fleksibiliti reka bentuk secara berkesan sambil berhati-hati terhadap konflik jenis, anda boleh menghasilkan kod yang kukuh dan sangat mudah dibaca.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.