Panduan Awal Mengenai Objek TypeScript

Hai sana, bakat coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia objek TypeScript. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan menjadi panduan temananda, dan kita akan mengambil langkah ini satu per satu. Pada akhir panduan ini, Anda akan dapat bekerja dengan objek seperti seorang ahli!

Apa Itu Objek?

Sebelum kita masuk ke detil khusus TypeScript, mari bicarakan apa itu objek dalam pemrograman. Bayangkan Anda memiliki sebuah tas punggung. Tas punggung ini dapat menampung berbagai macam item, masing-masing dengan karakteristiknya sendiri. Dalam pemrograman, objek seperti tas punggung itu - itu adalah wadah yang dapat menampung berbagai informasi yang berkaitan.

Sintaks: Cara Membuat Objek dalam TypeScript

Mari mulai dari dasar. Dalam TypeScript, kita dapat membuat objek menggunakan apa yang disebut "notasi literal objek". Itu mungkin terdengar sulit, tapi sebenarnya sangat sederhana. mari lihat contoh ini:

let myBackpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Dalam contoh ini, myBackpack adalah objek kita. Itu memiliki tiga properti: color, capacity, dan isWaterproof. Setiap properti memiliki nilai yang ditugaskan kepadanya.

Anotasi Tipe: Memberitahu TypeScript apa yang Diharapkan

Salah satu hal menarik tentang TypeScript adalah kita dapat memberitahu secara tepat jenis data yang kita harapkan objek kita akan mengandung. Ini disebut "anotasi tipe". Mari tingkatkan contoh tas punggung kita:

let myBackpack: {
color: string;
capacity: number;
isWaterproof: boolean;
} = {
color: "blue",
capacity: 20,
isWaterproof: true
};

Di sini, kita memberitahu TypeScript bahwa color selalu harus string, capacity selalu harus number, dan isWaterproof selalu harus boolean. Ini membantu menangkap kesalahan awal dan membuat kode kita lebih dapat dipercaya.

Notasi Literal Objek: Peninjauan Lebih Detil

Kita sudah melihat notasi literal objek dalam aksi, tapi mari kita rinci lebih lanjut. Sintaksik ini mengikuti pola berikut:

let objectName = {
property1: value1,
property2: value2,
// ... dan seterusnya
};

Setiap properti dipisahkan oleh koma, dan keseluruhan objek ditutup dalam kurung kurawal {}. Itu seperti memasukkan item ke tas punggung kita, dengan setiap item memiliki nama (properti) dan deskripsi (nilai).

Template Tipe TypeScript: Objek Reusable

kadang-kadang, kita ingin membuat beberapa objek dengan struktur yang sama. Itu di mana template tipe TypeScript berguna. Kita dapat menentukan tipe sekali dan menggunakannya berkali-kali:

type Backpack = {
color: string;
capacity: number;
isWaterproof: boolean;
};

let myBackpack: Backpack = {
color: "blue",
capacity: 20,
isWaterproof: true
};

let friendsBackpack: Backpack = {
color: "red",
capacity: 15,
isWaterproof: false
};

Tipe Backpack ini berperan seperti blueprint, memastikan bahwa setiap objek bertipe Backpack memiliki struktur yang benar.

Objek sebagai Parameter Fungsi: Menyampaikan Tas Punggung Kita

Objek dapat disampaikan ke fungsi, memungkinkan kita untuk bekerja dengan struktur data kompleks. mari lihat contoh ini:

function describeBackpack(backpack: Backpack): string {
return `This ${backpack.color} backpack has a capacity of ${backpack.capacity} liters and is ${backpack.isWaterproof ? "waterproof" : "not waterproof"}.`;
}

console.log(describeBackpack(myBackpack));
// Output: This blue backpack has a capacity of 20 liters and is waterproof.

Dalam fungsi ini, kita menyampaikan objek Backpack dan menggunakan propertinya untuk membuat deskripsi.

Objek Anonim: Tas Punggung Tanpa Nama

kadang-kadang, kita perlu membuat objek di tempat tanpa mengassignnya ke variabel. Ini disebut objek anonim:

function printBackpackColor(backpack: { color: string }): void {
console.log(`The backpack is ${backpack.color}.`);
}

printBackpackColor({ color: "green" });
// Output: The backpack is green.

Di sini, kita membuat objek langsung dalam panggilan fungsi. Itu seperti mendeskripsikan tas punggung kepada seseorang tanpa sebenarnya memiliki tas punggung itu.

Duck-typing: Jika Itu Menyerupai Bebek...

TypeScript menggunakan konsep yang disebut "duck-typing". Ide nya adalah: jika itu menyerupai bebek dan berbunyi seperti bebek, itu mungkin adalah bebek. Dalam istilah TypeScript, ini berarti bentuk objek lebih penting daripada tipe eksplicit nya:

interface Bag {
color: string;
carry(): void;
}

let myBackpack = {
color: "purple",
capacity: 25,
carry: function() { console.log("Carrying the backpack"); }
};

function useBag(bag: Bag) {
console.log(`Using a ${bag.color} bag`);
bag.carry();
}

useBag(myBackpack); // This works!

Meskipun myBackpack tidak dideklarasikan secara eksplisit sebagai Bag, itu memiliki semua properti dan metode yang seharusnya ada di Bag, sehingga TypeScript mengijinkannya.

Menutup Petualangan Tas Punggung Kita

Selamat! Anda baru saja memasukkan pengetahuan pertama Anda ke tas punggung objek TypeScript. Ingat, objek sangat kuat dalam pemrograman - mereka memungkinkan kita untuk mengelompokkan data dan fungsionalitas yang berkaitan bersamaan, seperti bagaimana tas punggung nyata menjaga semua peralatan hiking Anda di satu tempat.

Sekarang Anda teruskan perjalanan coding Anda, Anda akan menemukan objek di mana-mana. Mereka adalah blok bangunan aplikasi kompleks, dari daftar tugas sederhana hingga aplikasi web tingkat tinggi. Terus latihan, dan segera Anda akan dapat membuat dan mengubah objek dengan mudah!

Berikut adalah tabel rujukan cepat metode yang kita telah bahas:

Metode	Deskripsi
Notasi Literal Objek	Membuat objek menggunakan {} sintaks
Anotasi Tipe	Menentukan struktur objek
Template Tipe	Membuat tipe objek yang dapat digunakan berkali-kali
Objek sebagai Parameter Fungsi	Menyampaikan objek ke fungsi
Objek Anonim	Membuat objek tanpa mengassignnya ke variabel
Duck-typing	Pemeriksaan tipe berdasarkan bentuk objek

Happy coding, dan may your TypeScript objects always be bug-free and full of exciting properties!

Credits: Image by storyset